Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

说明： 本文介绍Vue 开发中对axios 的封装处理，不对axios 概念详细介绍

项目api基本结构

api 目录结构

安装

npm install axios --save

当然了使用yarn 或者 bower都可以了，看自己用的什么包管理器就用什么安装，也可以直接用cdn

封装请求

一般我们封装可以划分为以下三步

1. 请求拦截
2. 数据相应
3. 异常处理

创建 service.js 文件

创建服务

import axios from "axios";

const service = axios.create();

异常提示及错误处理

// 记录和显示错误
const TipLog = msg => {
  Message({
    message: msg,
    type: "warning",
    showClose: true
  });
};
const errorHandle = (status, msg) => {
  switch (status) {
    case "exceeded":
      TipLog(msg);
      break;
    case 400:
      TipLog(`请求出错: ${msg}`);
      break;
    case 401:
      TipLog(msg);
      store.dispatch('ZAdmin/user/logout')
      break;
    case 403:
      TipLog(`拒绝访问: ${msg}`);
      break;
    case 404:
      TipLog("请求不存在");
      break;
    case 408:
      TipLog("请求超时");
      break;
    case 426:
      TipLog(`${msg}`);
      break;
    case 500:
      TipLog(`服务器内部错误:${msg}`);
      break;
    case 501:
      TipLog("服务未实现");
      break;
    case 502:
      TipLog("网关错误");
      break;
    case 503:
      TipLog("服务不可用");
      break;
    
    default:
      TipLog(msg);
      break;
  }
};

请求拦截(如在请求前给headers中添加token）

service.interceptors.request.use(
  request => {
    const token = utils.cookies.get("token");
    const isToken = (request.headers || {}).isToken === false
    if (token && !isToken) {
      request.headers['token'] = 'Bearer ' + token// token
    }
    return request
  }
)

响应处理 （首先判断http 请求是否成功，然后判断业务接口处理数据返回是否正常)

service.interceptors.response.use(
  async response => {
    const { status, data } = response
    if (status === 200) {
      // 这儿业务接口处理成功数据状态码和后端讨论统一
      if (data.code === 0) {
          return data.data;
        } else {
          errorTipLog(data.msg)
          return Promise.reject(data.msg);
        }
    } else {
      errorTipLog(data.msg)
      return Promise.reject(data.msg);
    }
  },
  error => {
    const { response } = error;
    if (
      error.code === "ECONNABORTED" &&
      error.message.indexOf("timeout") !== -1
    ) {
      // 接口请求超时处理，一般建议重新请求一次，根据系统架构确定
      var originalRequest = error.config;
      return axios.request(originalRequest);
      // errorHandle("exceeded", "请求超时");
    } else {
      console.log(response, 'response')
      errorHandle(response.status, response.data.msg);
    }
    return Promise.reject(error);
  }
);

加载api

使用require.context 工程自动化导入所有的接口模块

import { request } from './service'

const files = require.context('./modules', false, /\.js$/)
const apiGenerators = files.keys().map(key => files(key).default)

let api = {}
apiGenerators.forEach(generator => {
  const apiInstance = generator({
    request
  })
  for (const apiName in apiInstance) {
    if (Object.prototype.hasOwnProperty.call(apiInstance, apiName)) {
      api[apiName] = apiInstance[apiName]
    }
  }
})

export default api

挂载api 到原型链上

main.js 中 
import api from "@/api";

Vue.prototype.$api = api;

api 模块写法

// 接口api
export default ({ request }) => ({
  // get 方法
  app_list(query = {}) {
    return request({
      url: "/url",
      method: "get",
      params: query,
    });
  },

  // 删除delete 
  app_del(query = {}) {
    return request({
      url: "/url",
      method: "delete",
      data: query,
    });
  },
  // 新增post
  app_add(query = {}) {
    return request({
      url: "/url",
      method: "post",
      data: query,
    });
  },
  // 编辑 put 
  app_edit(query = {}) {
    return request({
      url: "/url",
      method: "put",
      data: query,
    });
  }
});

具体参数传递处理是指定字段还是统一json ，看项目架构了

调用请求

页面中就可以直接这样调用了，不用导入指定模块

this.$api.app_list().then(res=> {
console.log(res)
})

一般建议接口文件名称和页面模块相对应，这样找的时候可以很快找到，基础代码都在上面了，实际业务开发中还会进行扩展及处理，如批量请求等本文没有做封装处理，当然有些业务也不一定需要封装请求，具体根据架构处理。