目录

一、安装axios

二、二次封装axios

三、对异常进行处理

四、编写接口

五、调用

一、安装axios

npm install --save axios

二、二次封装axios

在src目录下新建utils文件夹（常用的一些工具都可以放在里面），在utils目录下新建api.js文件来对axios进行二次封装。

import axios from "axios";
import router from "../router";
import store from "../store";
import { Message } from "element-ui";

// 设置请求的基础信息
// 开发环境可以在vue.config.js中配置代理
const Axios = axios.create({
  baseURL:
    process.env.NODE_ENV === "production" ? process.env.VUE_APP_URL : "/api/",
  timeout: 10000 // 请求超时时间
});

// 封装post方法
const POST = (url, data) => {
  return Axios({
    method: "post",
    url: url,
    data: data,
    headers: {
      "Content-Type": "application/x-www-form-urlencoded"
    }
  });
};

三、对异常进行处理

有些请求是需要用户登录之后才可以访问的，我们可以在发送请求前进行一个请求的拦截。也可以在请求之前处理一下我们的数据，例如对要提交的数据序列化。在每次请求接口的时候，可以在请求的header中携带token，后台根据携带的token来判断登录是否过期，如果没有携带，则说明没有登录过。（注意：前端的请求中可以携带token，但后台可以选择不接收）

// 请求拦截器，可以设置请求头
Axios.interceptors.request.use(
  config => {
    if (localStorage.getItem("token")) {
      config.headers["Authorization"] = localStorage.getItem("token");
    }
    // config.headers["Content-Type"] = "application/json";
    config.headers["Content-Type"] = "application/x-www-form-urlencoded";
    return config;
  },
  error => {
    console.log(error);
    Promise.reject(error);
  }
);

// 响应拦截器
Axios.interceptors.response.use(
  response => {
    if (response.status === 200) {
      return Promise.resolve(response);
    } else {
      return Promise.reject(response);
    }
  },
  error => {
    // 请求超时，可以提示稍后重试，也可以新建promise再次请求（注意控制请求次数避免一直请求）
    const { code, message } = error;
    if (code === "ECONNABORTED" && message.indexOf("timeout") !== -1) {
      Message.error("请求超时，请稍后重试");
    }
    if (error.response.status ) {
      switch (error.response.status ) {
        // 401 跳转登录页并携带当前页面路径参数，登陆后返回该页面
        case 401:
          router.replace({
            path: "/login",
            query: {
              redirect: router.currentRoute.fullPath
            }
          });
          break;

        // 403 token过期
        // 登录过期对用户进行提示
        // 清除本地token和清空vuex中token对象
        // 跳转登录页并携带当前页面路径参数，登陆后返回该页面
        case 403:
          Message.error("登录过期，请重新登录");
          localStorage.removeItem("token");
          store.commit("loginSuccess", null);
          setTimeout(() => {
            router.replace({
              path: "/login",
              query: {
                redirect: router.currentRoute.fullPath
              }
            });
          }, 1000);
          break;

        // 404请求不存在
        case 404:
          Message.error("网络请求不存在");
          break;

        // 其他错误，直接抛出错误提示
        default:
          Message.error(error.response.data.message);
      }
      return Promise.reject(error.response);
    }
  }
);

四、编写接口

接下来就要根据你的业务去写你的接口了（这里我们把接口都暴露出去，方便后续的调用）

export default {
  login: data => {
    return POST("auth/login", data);
  }
};

五、调用

在main.js中引入你写好的api.js文件，然后通过prototype挂载到Vue实例上，后续调用时可以直接在Vue实例上找到api下的对应的接口方法啦。

import api from "./utils/api";

Vue.prototype.api = api;
mounted() {
  this.api.login({}).then(res => {
    console.log(res);
    // 你的业务逻辑
  });
}

补充：跨域代理设置

devServer: {
  // 端口设置
  port: port,
  open: true,

  // VUE_APP_URL就是你要调用的接口地址
  proxy: {
    "/api": {
      target: VUE_APP_URL,
      changOrigin: true, // 允许跨域
      ws: true,
      pathRewrite: {
        "^/api": "api"
      }
    }
  }
}

结语：本人知识有限，文章内容如有错误，劳烦留言指出。