axios請求的常見操作方法有哪些

這篇文章主要介紹“axios請求的常見操作方法有哪些”，在日常操作中，相信很多人在axios請求的常見操作方法有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”axios請求的常見操作方法有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

axios封裝請求

axios封裝常見操作

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

axios的二次封裝

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

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

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

// 添加響應攔截器
http.interceptors.response.use(
  function (response) {
    // 2xx 范圍內的狀態碼都會觸發該函數。
    // 對響應數據做點什么
    const { data } = response;
    return data;
  },
  function (error) {
    // 超出 2xx 范圍的狀態碼都會觸發該函數。
    // 對響應錯誤做點什么
    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()
    //刪除當前數據
    httplist.splice(index, 1)
  }
}
http.interceptors.request.use(
  function (config) {
    removeHttp(config)
    //取消操作
     //在push之前遍歷數組找到相同的請求取消掉
    const controller = new AbortController()
    config.signal = controller.signal //用來取消操作的key
    config.controller = controller //將控制器綁定到每個請求身上
    httplist.push({ ...config }) //每次的請求加入到數組
    return config
  },
  function (error) {
    // 對請求錯誤做些什么
    return Promise.reject(error)
  }
)

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

axios的錯誤重復請求

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

  // 設置變量以跟蹤重試次數
  config.__retryCount = config.__retryCount || 0;

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

  // 增加重試次數
  config.__retryCount += 1;

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

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

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

token失效返回登錄頁面

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

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

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

到此，關于“axios請求的常見操作方法有哪些”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！