vue中Axios的封装与API接口的管理详解

/**
 * post方法，对应post请求
 * @param {String} url [请求的url地址] * @param {Object} params [请求时携带的参数] */
export function post(url, params) {
 return new Promise((resolve, reject) => {
  axios.post(url, QS.stringify(params))
 .then(res => {
  resolve(res.data);
 })
 .catch(err =>{
  reject(err.data)
 })
 });
}

这里有个小细节说下，axios.get()方法和axios.post()在提交数据时参数的书写方式还是有区别的。区别就是，get的第二个参数是一个{}，然后这个对象的params属性值是一个参数对象的。而post的第二个参数就是一个参数对象。两者略微的区别要留意哦！

axios的封装基本就完成了，下面再简单说下api的统一管理。

整齐的api就像电路板一样，即使再复杂也能很清晰整个线路。上面说了，我们会新建一个api.js,然后在这个文件中存放我们所有的api接口。

首先我们在api.js中引入我们封装的get和post方法

/**
 * api接口统一管理
 */
import { get, post } from './http'

现在，例如我们有这样一个接口，是一个post请求：

http://www.baiodu.com/api/v1/users/my_address/address_edit_before

我们可以在api.js中这样封装：

export const apiAddress = p => post('api/v1/users/my_address/address_edit_before', p);

我们定义了一个apiAddress方法，这个方法有一个参数p，p是我们请求接口时携带的参数对象。而后调用了我们封装的post方法，post方法的第一个参数是我们的接口地址，第二个参数是apiAddress的p参数，即请求接口时携带的参数对象。最后通过export导出apiAddress。

然后在我们的页面中可以这样调用我们的api接口：

import { apiAddress } from '@/request/api';// 导入我们的api接口
export default {
 name: 'Address',
 created () {
  this.onLoad();
 },
 methods: {
  // 获取数据
  onLoad() {
   // 调用api接口，并且提供了两个参数
   apiAddress({
    type: 0,
    sort: 1
   }).then(res => {
    // 获取数据成功后的其他操作
    ………………
   })
  }
 }
}

其他的api接口，就在pai.js中继续往下面扩展就可以了。友情提示，为每个接口写好注释哦！！！api接口管理的一个好处就是，我们把api统一集中起来，如果后期需要修改接口，我们就直接在api.js中找到对应的修改就好了，而不用去每一个页面查找我们的接口然后再修改会很麻烦。关键是，万一修改的量比较大，就规格gg了。还有就是如果直接在我们的业务代码修改接口，一不小心还容易动到我们的业务代码造成不必要的麻烦。