怎么將Vue3?Axios攔截器封裝成request文件

這篇文章主要介紹“怎么將Vue3 Axios攔截器封裝成request文件”，在日常操作中，相信很多人在怎么將Vue3 Axios攔截器封裝成request文件問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”怎么將Vue3 Axios攔截器封裝成request文件”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

1、創(chuàng)建一個(gè)名為request.js的新文件，并導(dǎo)入Axios：

import axios from 'axios';

2、創(chuàng)建一個(gè)名為request的函數(shù)，并將其導(dǎo)出：

這將創(chuàng)建一個(gè)名為request的函數(shù)，并將其設(shè)置為具有基本URL的新的Axios實(shí)例。要在封裝的Axios實(shí)例中添加超時(shí)設(shè)置，可以在創(chuàng)建Axios實(shí)例時(shí)傳遞timeout選項(xiàng)。

export const request = axios.create({
  baseURL: 'https://example.com/api',
  timeout: 5000, // 超時(shí)設(shè)置為5秒
});

3、在request函數(shù)中添加攔截器：

request.interceptors.request.use(function (config) {
  // 在發(fā)送請(qǐng)求之前做些什么
  return config;
}, function (error) {
  // 對(duì)請(qǐng)求錯(cuò)誤做些什么
  return Promise.reject(error);
});

request.interceptors.response.use(function (response) {
  // 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么
  return response;
}, function (error) {
  // 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么
  return Promise.reject(error);
});

這將添加一個(gè)請(qǐng)求攔截器和一個(gè)響應(yīng)攔截器。可以在這些攔截器中執(zhí)行需要的操作，例如在請(qǐng)求發(fā)送之前添加身份驗(yàn)證標(biāo)頭或在響應(yīng)返回后檢查響應(yīng)數(shù)據(jù)是否有誤。

4、最后，導(dǎo)出request函數(shù)：

export default request;

5、現(xiàn)在可以在應(yīng)用程序中使用request函數(shù)來(lái)執(zhí)行網(wǎng)絡(luò)請(qǐng)求，并且每個(gè)請(qǐng)求都將經(jīng)過(guò)預(yù)定義的攔截器。例如：

import request from './request';

request.get('/users')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

這將使用封裝的Axios實(shí)例發(fā)出GET請(qǐng)求，然后使用預(yù)定義的攔截器處理響應(yīng)

完整示例：

要在發(fā)送請(qǐng)求之前攜帶Token和Username，可以使用請(qǐng)求攔截器來(lái)為所有請(qǐng)求添加身份驗(yàn)證標(biāo)頭，

請(qǐng)求攔截器檢查localStorage中是否存在名為“token”和“username”的值，并將其添加為Authorization和Username標(biāo)頭。根據(jù)實(shí)際情況調(diào)整這些標(biāo)頭的名稱(chēng)和值。

要對(duì)響應(yīng)數(shù)據(jù)進(jìn)行操作，使用響應(yīng)攔截器。在上面的示例中，響應(yīng)攔截器檢查響應(yīng)數(shù)據(jù)中的“status”屬性是否為“success”。如果不是，則將其視為錯(cuò)誤，并將其作為異常拋出。異常包含響應(yīng)對(duì)象，其中包含所有響應(yīng)信息，例如響應(yīng)頭、狀態(tài)碼和響應(yīng)體?？梢愿鶕?jù)實(shí)際情況調(diào)整這些檢查和異常拋出的邏輯。

import axios from 'axios';

export const request = axios.create({
  baseURL: 'https://example.com/api',
  timeout: 5000, // 超時(shí)設(shè)置為5秒
});

request.interceptors.request.use(function (config) {
  // 在發(fā)送請(qǐng)求之前添加身份驗(yàn)證標(biāo)頭
  config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
  config.headers.Username = localStorage.getItem('username');
  return config;
}, function (error) {
  // 對(duì)請(qǐng)求錯(cuò)誤做些什么
  return Promise.reject(error);
});
request.interceptors.response.use(function (response) {
  // 對(duì)響應(yīng)數(shù)據(jù)做些什么
  const responseData = response.data;
  if (responseData.status !== 'success') {
    const error = new Error(responseData.message || '請(qǐng)求失敗');
    error.response = response;
    throw error;
  }
  return responseData.data;
}, function (error) {
  // 對(duì)響應(yīng)錯(cuò)誤做些什么
  return Promise.reject(error);
});

到此，關(guān)于“怎么將Vue3 Axios攔截器封裝成request文件”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！