和之前文章《微信小程序封装request请求》很像的独门For循环写法…
优势确实是很干净啦~

1、新建两个文件，用于对axios的封装和对接口的管理

我这里在src/assets/js/api之下新建了一个index.js和apiList.js

在index.js中，对axios进行封装：

import axios from 'axios';
import { Message } from 'element-ui';
import apiList from './apiList';
import store from '@/store';
 
axios.defaults.timeout = 5000; // 超时终止请求
axios.defaults.baseURL ='http://192.168.0.88:8080/'; // 配置请求地址

// 设置请求拦截器
axios.interceptors.request.use(
  config => {
    // const token = getCookie('名称'); // 注意使用的时候需要引入cookie方法，推荐js-cookie
    config.data = JSON.stringify(config.data);
    config.headers = {
        'Content-Type': 'application/json;charset=UTF-8',
        // 'Content-Type':'application/x-www-form-urlencoded'
    }
    if(store.state.token) {
      config.headers['Authorization'] = store.state.token;
    }
    return config;
  },
  error => {
    return Promise.reject(err);
  }
);

// 设置响应拦截器
axios.interceptors.response.use(
  response => {
    // if(response.data.errCode == 2){
    //   router.push({
    //     path:"/login",
    //     querry:{redirect:router.currentRoute.fullPath} // 从哪个页面跳转
    //   })
    // }
    // return response;
    let res = response.data; // 取到响应返回的数据
    if(res.code == 200) {
      return res.data;
    } else {
      // 状态码如果不是200则为报错，弹出报错信息，且不返回任何数据
      Message.error(res.msg);
    }
  },
  error => {
    Message.error(error.message);
    return Promise.reject(error)
  }
)

// 以下是封装方法：
// get delete请求方式中，第一个参数为请求的url地址，第二个参数为请求的一些配置项，需要传递给后端的参数包含在配置项的data或者params属性中，
// post put patch请求则第一个参数为url地址，第二个参数是需要入参的json数据，第三个参数是入参以外的其他配置项。

var list = {};

for(let item in apiList) {
  list[item] = function(params) {
    let [method, url] = apiList[item];
    let data = (method == 'get' || method == "delete") ? {params} : (method == 'post' || method == "put" || method == "patch") ? params : {}
    return new Promise((resolve, reject) => {
      axios[method](url, data)
      .then(res => {
        if(res) {
          // 在响应拦截器中，设置了code非200不返回数据，res则有可能会是undefined。所以判断res有数据才用resolve送出去。
          resolve(res);
        }
      })
      .catch(err => {
        reject(err);
      })
    })
  }
}

export default list;

在apiList.js中，对所有接口进行统一管理：

let apiList = {
    login: ["post", "/user/login"], // 用户登录
    getCaptcha: ["get", "/user/captcha"], // 获取登录图片验证码
    logout: ["get", "/user/logout"], // 用户登出
}

export default apiList;

2、在main.js中引入

import http from '@/assets/js/api'; // 引入接口列表
Vue.prototype.$http = http; // 将接口列表挂载到全局

3、在页面中使用封装好的方法

let params = {
  username: "barben",
  password: "12345678"
}

this.$http.login(params)
.then(res => {
  console.log(res);
})
.catch(err => {
  console.log(err);
})