axios封装

axios 二次封装

通常我们的项目会越做越大,页面也会越来越多,如果页面非常的少,直接用axios也没有什么大的影响,那页面组件多了起来,上百个接口呢,这个时候后端改了接口,多加了一个参数什么的呢?那就只有找到那个页面,进去修改.整个过程很繁琐不易于项目的维护和迭代.这个时候如果我们统一的区管理接口,需要修改某一个接口的时候直接在api里修改对应的请求是不是很方便呢?因为我们用的最多的还是get post请求.我们就可以针对封装.

// 引入axios
import axios from "axios";
import qs from "qs";

const instance = axios.create({
  baseURL: "",
  timeout: 1000,
});

// 添加请求拦截器
instance.interceptors.request.use(
  function (config) {
    removeHttpList(config);

    // 在发送请求之前做些什么
    config.data =
      config.data instanceof FormData ? config.data : qs.stringify(config.data);
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
instance.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    return response.status == 200 ? response.data : response;
  },
  function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

export default instance;

axios 取消请求

axios请求完成之后取消请求

// 引入axios
import axios from "axios";
import qs from "qs";

const instance = axios.create({
  baseURL: "",
  timeout: 1000,
});

// 取消服务请求
let httpList = [];
const removeHttpList = (config) => {
  let index = httpList.findIndex(
    (v) => v.url == config.url && v.method == config.method
  );

  if (index >= 0) {
    // 取消请求
    // controller.abort()
    httpList[index].controller.abort();
    httpList.splice(index, 1);
  }
};

// 添加请求拦截器
instance.interceptors.request.use(
  function (config) {
    removeHttpList(config);

    // 取消操作
    const controller = new AbortController();
    config.signal = controller.signal;
    config.controller = controller;

    httpList.push({ ...config });

    // 在发送请求之前做些什么
    config.data =
      config.data instanceof FormData ? config.data : qs.stringify(config.data);
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
instance.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    return response.status == 200 ? response.data : response;
  },
  function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

export default instance;

axios请求失败重复请求

当我们axios请求失败之后会再次请求数据

import axios from "axios";

// 重试次数，共请求2次
axios.defaults.retry = 1;
// 请求的间隙
axios.defaults.retryDelay = 1000;

axios.interceptors.response.use(undefined, function axiosRetryInterceptor(err) {
  // 发送请求后返回错误状态码的那个接口的请求配置，都存在宇err.config里面
  let config = err.config; 
  // 如果配置不存在或未设置重试选项，则拒绝 // 重试请求的次数，如果你设置了1，就请求2次，如果是5，就请求6次

  if (!config || !config.retry) return Promise.reject(err); // 设置变量以跟踪重试次数
  // 判断是否超过总重试次数,超过retry设置的次数的时候，就不再重复发起请求了
  config.__retryCount = config.__retryCount || 0;
 

  if (config.__retryCount >= config.retry) {
    // 返回错误并退出自动重试
    return Promise.reject(err);
  } // 增加重试次数

  config.__retryCount += 1; //打印当前重试次数

  console.log(config.url + " 自动重试第" + config.__retryCount + "次"); // 创建新的Promise

  let backoff = new Promise(function (resolve) {
    setTimeout(function () {
      resolve();
    }, config.retryDelay || 1);
  }); // 返回重试请求

  return backoff.then(function () {
    return axios(config);
  });
});

export default axios;

token失效返回登录页面

token失效返回登录页的原理呢就是在进行axios请求时，对需要拼接token的接口做的响应式拦截中判断请求数据返回的

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
 
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, 
  timeout: 5000 
})
//发送请求时把token携带过去
service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      config.headers['sg-token'] = getToken()
    }
    return config
  },
  error => {
    console.log(error)
    return Promise.reject(error)
  }
)
 
service.interceptors.response.use(
  response => {
    console.log(response.data)
    const res = response.data
 
    // token过期，重返登录界面
    if (res.code === 10009) {
      store.dispatch('user/logout').then(() => {
        location.reload(true)
      })
    }
    return res
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.msg,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)
 
export default service
 

更多有关axios知识请前往 axios官网