vue axios 关于request请求封装

一般这种情况都是根据自己的喜好怎么写都行
首先肯定是npm install axios

在项目里创建一个文件request.js文件

首先引入vue和axios

import Vue from "vue";
import axios from 'axios'

// 创建axios实例

const instance = axios.create({
  timeout: 1000 * 60 * 5  //设置超时时间，超时之后请求便会cancel
});

获取接口请求地址

const baseURL = process.env.VUE_APP_SYSTEM_CONFIG_URL + process.env.VUE_APP_BASE_API

这个process.env.VUE_APP_SYSTEM_CONFIG_URL，process.env.VUE_APP_BASE_API拿的是下面文件里面的配置

我这是因为做了多环境配置，所以有这么文件，没有配置多环境一般情况就是prod里面的配置

//设置环境，生产
NODE_ENV = 'production'
//这个是接口请求需要拼接的前缀，需要就拼接，不需要直接拿掉
VUE_APP_BASE_API = "/api/"
//这个就是接口请求的ip地址，设置的话就根据这个访问接口，不设置的话默认是当前域名，我这里就是当前域名
VUE_APP_SYSTEM_CONFIG_URL = ""

// 设置请求头和接口地址

instance.defaults.headers['Content-Type'] = 'application/json; charset=UTF-8'
instance.defaults.baseURL = baseURL

/**

• 请求拦截器
• 每次请求前，如果存在token则在请求头中携带token
  */

instance.interceptors.request.use(
  (config) => {
    // 登录流程控制中，根据本地是否存在token判断用户的登录情况
    // 但是即使token存在，也有可能token是过期的，所以在每次的请求头中携带token
    // 后台根据携带的token判断用户的登录情况，并返回给我们对应的状态码
    // 而后我们可以在响应拦截器中，根据状态码进行一些统一的操作。
    //看看你的token是需要在哪里拿到，有可能是cookie
    // const token =  VueCookies.get("token");
    //也可以是本地缓存
    const token = localStorage.getItem("token");
    //很多为了安全考虑，所以把token设置到请求头里面
    config.headers["Authorization"] = `Bearer ${token}`;
    return config;
  },
  error => {
    Promise.error(error)
  },
)

// 防抖节流
preventMessage = true

// 响应拦截器
instance.interceptors.response.use(
  // 请求成功
  response => {
    if (response.status === 200) {
      setTimeout(() => {
        preventMessage = true
      }, 1000);
      // code根据实际情况
      if(response.data.errorCode == "200" ){
        return Promise.resolve(response.data)
      }
    } else {
      errorHandle(response.status, response.data.message)
      return Promise.reject(response.data)
    }
  },
  // 请求失败
  (error) => {
    const {
      response
    } = error;
    if (response) {
      // 请求已发出，但是不在2xx的范围
      if (response.data.errorMessage) {
        if (response.status === 500) {
          preventMessage = false
          errorHandle(response.status, response.data.errorMessage)
        } else if (response.status === 403) {
          //无权限
          preventMessage = false
          localStorage.clear();
          errorHandle(response.status, response.data.errorMessage)
        } else {
          preventMessage = false
          errorHandle(response.status, response.data.errorMessage)
        }
      }
    } else {
      errorHandle(response.status, response.data.message)
      return Promise.reject(response)
    }
  }
);

/**

• 请求失败后的错误统一处理
  */

const errorHandle = (status, msg) => {
  // 状态码判断
  switch (status) {
    // 401: 未登录状态，跳转登录页
    case 401:
      //写业务所需要得操作
    //402 账号被禁用
    case 402:
      //写业务所需要得操作
      break;
    // 403 token过期
    case 403:
      //写业务所需要得操作
      break;
    case 500:
    //message提示框根据业务所选得框架来定
      Vue.prototype.$message.error(msg);
      break;
  }
};