快捷導(dǎo)航

axios請(qǐng)求的一些常見操作實(shí)戰(zhàn)指南

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

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

axios封裝請(qǐng)求

axios封裝常見操作

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

axios的二次封裝

//我們?cè)谧鯽xios封裝時(shí)，我們引入axios
import axios from 'axios'
//請(qǐng)求攔截器和響應(yīng)式攔截器就是直接axios.跟上攔截器
axios.interceptors.request.use(
  function (config) {
    // 在發(fā)送請(qǐng)求之前做些什么
    return config;
  },
  function (error) {
    // 對(duì)請(qǐng)求錯(cuò)誤做些什么
    return Promise.reject(error);
  }
);

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

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

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

axios的取消重復(fù)請(qǐng)求

我們拿二次封裝后的axios請(qǐng)求來完成取消重復(fù)請(qǐng)求

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

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

axios的錯(cuò)誤重復(fù)請(qǐng)求

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

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

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

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

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

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

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

token失效返回登錄頁面

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

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

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