axios請求的一些常見操作實戰(zhàn)指南

更新時間：2022年09月18日 08:52:18 作者：翜煜

axios是一個輕量的HTTP客戶端,它基于XMLHttpRequest服務來執(zhí)行 HTTP請求,支持豐富的配置,支持Promise,支持瀏覽器端和 Node.js 端,下面這篇文章主要給大家介紹了關(guān)于axios請求的一些常見操作,需要的朋友可以參考下

axios封裝請求

axios封裝常見操作

axios請求時的常見或者說是常用的操作，需要對常規(guī)的axios封裝做出改變根據(jù)不同條件寫出不同的效果

axios的二次封裝

//我們在做axios封裝時，我們引入axios
import axios from 'axios'
//請求攔截器和響應式攔截器就是直接axios.跟上攔截器
axios.interceptors.request.use(
  function (config) {
    // 在發(fā)送請求之前做些什么
    return config;
  },
  function (error) {
    // 對請求錯誤做些什么
    return Promise.reject(error);
  }
);

// 添加響應攔截器
axios.interceptors.response.use(
  function (response) {
    // 2xx 范圍內(nèi)的狀態(tài)碼都會觸發(fā)該函數(shù)。
    // 對響應數(shù)據(jù)做點什么
    const { data } = response;
    return data;
  },
  function (error) {
    // 超出 2xx 范圍的狀態(tài)碼都會觸發(fā)該函數(shù)。
    // 對響應錯誤做點什么
    return Promise.reject(error);
  }
);

//二次封裝是因為項目業(yè)務根據(jù)不同的功能模塊劃分為不同的 url 前綴等等，
//我們就可以根據(jù)功能模塊配置不同的 axios 配置。
import axios from "axios";
const http = axios.create({
  baseURL: process.env.VUE_APP_BASE_URL,
});
// 添加請求攔截器
http.interceptors.request.use(
  function (config) {
    // 在發(fā)送請求之前做些什么
    return config;
  },
  function (error) {
    // 對請求錯誤做些什么
    return Promise.reject(error);
  }
);

// 添加響應攔截器
http.interceptors.response.use(
  function (response) {
    // 2xx 范圍內(nèi)的狀態(tài)碼都會觸發(fā)該函數(shù)。
    // 對響應數(shù)據(jù)做點什么
    const { data } = response;
    return data;
  },
  function (error) {
    // 超出 2xx 范圍的狀態(tài)碼都會觸發(fā)該函數(shù)。
    // 對響應錯誤做點什么
    return Promise.reject(error);
  }
);

axios的取消重復請求

我們拿二次封裝后的axios請求來完成取消重復請求

import axios from "axios";
const http = axios.create({
  baseURL: process.env.VUE_APP_BASE_URL,//公共路徑
});
//取消請求
let httplist = []
const removeHttp = config => {
  let index = httplist.findIndex(v => v.url === config.url && v.method === config.method)
  if (index >= 0) {
    //取消請求
    httplist[index].controller.abort()
    //刪除當前數(shù)據(jù)
    httplist.splice(index, 1)
  }
}
http.interceptors.request.use(
  function (config) {
    removeHttp(config)
    //取消操作
     //在push之前遍歷數(shù)組找到相同的請求取消掉
    const controller = new AbortController()
    config.signal = controller.signal //用來取消操作的key
    config.controller = controller //將控制器綁定到每個請求身上
    httplist.push({ ...config }) //每次的請求加入到數(shù)組
    return config
  },
  function (error) {
    // 對請求錯誤做些什么
    return Promise.reject(error)
  }
)

// 添加響應攔截器
http.interceptors.response.use(
  function (response) {
    // 2xx 范圍內(nèi)的狀態(tài)碼都會觸發(fā)該函數(shù)。
    // 對響應數(shù)據(jù)做點什么
    const { data } = response;
    return data;
  },
  function (error) {
    // 超出 2xx 范圍的狀態(tài)碼都會觸發(fā)該函數(shù)。
    // 對響應錯誤做點什么
    return Promise.reject(error);
  }
);

axios的錯誤重復請求

http.interceptors.response.use(undefined, function axiosRetryInterceptor(err) {
  var config = err.config;
  // 如果配置不存在或未設(shè)置重試選項，則拒絕
  if (!config || !config.retry) return Promise.reject(err);

  // 設(shè)置變量以跟蹤重試次數(shù)
  config.__retryCount = config.__retryCount || 0;

  // 判斷是否超過總重試次數(shù)
  if (config.__retryCount >= config.retry) {
    // 返回錯誤并退出自動重試
    return Promise.reject(err);
  }

  // 增加重試次數(shù)
  config.__retryCount += 1;

  //打印當前重試次數(shù)
  console.log(config.url + " 自動重試第" + config.__retryCount + "次");

  // 創(chuàng)建新的Promise
  var backoff = new Promise(function (resolve) {
    setTimeout(function () {
      resolve();
    }, config.retryDelay || 1);
  });

  // 返回重試請求
  return backoff.then(function () {
    return axios(config);
  });
});

token失效返回登錄頁面

token失效返回登錄頁的原理呢就是在進行axios請求時，對需要拼接token的接口做的響應式攔截中判斷請求數(shù)據(jù)返回的

//我們在做axios封裝時，我們引入axios
import axios from 'axios'
//請求攔截器和響應式攔截器就是直接axios.跟上攔截器
//聲明一個數(shù)組，相當于一個白名單
const whiteList=[
    '/login',
    '/code'
]
//放入不需要拼接token的接口
axios.interceptors.request.use(
  function (config) {
    // 在發(fā)送請求之前做些什么
    return config;
  },
  function (error) {
    // 對請求錯誤做些什么
    return Promise.reject(error);
  }
);

// 添加響應攔截器
axios.interceptors.response.use(
  function (response) {
      if(whiteList.includes(response.config.url)){
      //如果白名單中包含請求的接口不做任何操作
      }else{
      //反之判斷返回的數(shù)據(jù)中的code或是status
      if(response.data.code===401)
      //我這邊token失效返回的是401
      sessionStorage.removeItem('token')
      //清空存儲的token值
      window.location('/login')
      //跳轉(zhuǎn)登錄頁
      }
  
    // 2xx 范圍內(nèi)的狀態(tài)碼都會觸發(fā)該函數(shù)。
    // 對響應數(shù)據(jù)做點什么
    const { data } = response;
    return data;
  },
  function (error) {
    // 超出 2xx 范圍的狀態(tài)碼都會觸發(fā)該函數(shù)。
    // 對響應錯誤做點什么
    return Promise.reject(error);
  }
);