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

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

axios封裝請求

axios封裝常見操作

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

axios的二次封裝

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

// 添加響應(yīng)攔截器
axios.interceptors.response.use(
  function (response) {
    // 2xx 范圍內(nèi)的狀態(tài)碼都會觸發(fā)該函數(shù)。
    // 對響應(yīng)數(shù)據(jù)做點(diǎn)什么
    const { data } = response;
    return data;
  },
  function (error) {
    // 超出 2xx 范圍的狀態(tài)碼都會觸發(fā)該函數(shù)。
    // 對響應(yīng)錯誤做點(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,
});
// 添加請求攔截器
http.interceptors.request.use(
  function (config) {
    // 在發(fā)送請求之前做些什么
    return config;
  },
  function (error) {
    // 對請求錯誤做些什么
    return Promise.reject(error);
  }
);

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

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

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

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()
    //刪除當(dāng)前數(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 //將控制器綁定到每個(gè)請求身上
    httplist.push({ ...config }) //每次的請求加入到數(shù)組
    return config
  },
  function (error) {
    // 對請求錯誤做些什么
    return Promise.reject(error)
  }
)

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

axios的錯誤重復(fù)請求

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) {
    // 返回錯誤并退出自動重試
    return Promise.reject(err);
  }

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

  //打印當(dāng)前重試次數(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失效返回登錄頁的原理呢就是在進(jìn)行axios請求時(shí)，對需要拼接token的接口做的響應(yīng)式攔截中判斷請求數(shù)據(jù)返回的

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

// 添加響應(yīng)攔截器
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ù)。
    // 對響應(yīng)數(shù)據(jù)做點(diǎn)什么
    const { data } = response;
    return data;
  },
  function (error) {
    // 超出 2xx 范圍的狀態(tài)碼都會觸發(fā)該函數(shù)。
    // 對響應(yīng)錯誤做點(diǎn)什么
    return Promise.reject(error);
  }
);

到此，關(guān)于“axios請求的常見操作方法有哪些”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！