[vue]# 前后端分离 7：前端 续3 抽出相同部分→复用

前后端分离 7：前端 续3 调整 API.js

Author： ZeXu

Soft: WebStorm

续接 # 前后端分离 3：前端 API.js

在做数据新增的时候需要用到一个新的接口来做新增
发现get、post之间就有 aixos.get/post 的区别，而且后面还会用到 put 和 delete
就尝试着将其公共部分抽出（changeAxios），当时就抽出来后，就害怕不能成功，因为还是我弄不明白 异步和同步
但是还好，抽出来后，调用接口，其实并没有发生什么，是我多想了~~~

``` javascript // # api.js import axios from 'axios' import to from 'await-to-js' function API () { // get 获取 let get = (url, params) => { if (params) { let keys = Object.keys(params)
      url = url + '?' for (let i = 0; i < keys.length; i++) { if (['[object Object]', '[object Array]'].some(item => Object.prototype.toString.call(params[keys]) === item)) {
          params[keys] = JSON.stringify(params[keys])
        }
        url = url + keys + '=' + params[keys] + (i === keys.length - 1 ? '' : '&')
      }
    } return to(new Promise((resolve, reject) => {
      changeAxios(axios.get, url, params, resolve, reject)
    }))
  } // post 增加 let post = (url, params) => { return to(new Promise((resolve, reject) => {
      changeAxios(axios.post, url, params, resolve, reject)
    }))
  } // put 编辑 // delete 删除 let changeAxios = (reqMethod, url, params, resolve, reject) => {
    reqMethod(url, params).then((response) => {
      resolve(response.data)
    }).catch((error) => {
      reject(error)
    })
  } this.product = {
    getMethod (params) { return get('/product', params)
    },

    postMethod () { return post('/product', {name: 123, pwd: '456', value: ['q', 'w', 'e', 'r']})
    }
  } this.news = {
    query (params) { return get('/company/news/queryNews', params)
    },

    add (params) { return post('/company/news/addNews', params)
    }
  }
} export default new API() ```