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

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

1、創建一個名為request.js的新文件，并導入Axios：

import axios from 'axios';

2、創建一個名為request的函數，并將其導出：

這將創建一個名為request的函數，并將其設置為具有基本URL的新的Axios實例。要在封裝的Axios實例中添加超時設置，可以在創建Axios實例時傳遞timeout選項。

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

3、在request函數中添加攔截器：

request.interceptors.request.use(function (config) {
  // 在發送請求之前做些什么
  return config;
}, function (error) {
  // 對請求錯誤做些什么
  return Promise.reject(error);
});

request.interceptors.response.use(function (response) {
  // 對響應數據做點什么
  return response;
}, function (error) {
  // 對響應錯誤做點什么
  return Promise.reject(error);
});

這將添加一個請求攔截器和一個響應攔截器。可以在這些攔截器中執行需要的操作，例如在請求發送之前添加身份驗證標頭或在響應返回后檢查響應數據是否有誤。

4、最后，導出request函數：

export default request;

5、現在可以在應用程序中使用request函數來執行網絡請求，并且每個請求都將經過預定義的攔截器。例如：

import request from './request';

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

這將使用封裝的Axios實例發出GET請求，然后使用預定義的攔截器處理響應

完整示例：

要在發送請求之前攜帶Token和Username，可以使用請求攔截器來為所有請求添加身份驗證標頭，

請求攔截器檢查localStorage中是否存在名為“token”和“username”的值，并將其添加為Authorization和Username標頭。根據實際情況調整這些標頭的名稱和值。

要對響應數據進行操作，使用響應攔截器。在上面的示例中，響應攔截器檢查響應數據中的“status”屬性是否為“success”。如果不是，則將其視為錯誤，并將其作為異常拋出。異常包含響應對象，其中包含所有響應信息，例如響應頭、狀態碼和響應體。可以根據實際情況調整這些檢查和異常拋出的邏輯。

import axios from 'axios';

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

request.interceptors.request.use(function (config) {
  // 在發送請求之前添加身份驗證標頭
  config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
  config.headers.Username = localStorage.getItem('username');
  return config;
}, function (error) {
  // 對請求錯誤做些什么
  return Promise.reject(error);
});
request.interceptors.response.use(function (response) {
  // 對響應數據做些什么
  const responseData = response.data;
  if (responseData.status !== 'success') {
    const error = new Error(responseData.message || '請求失敗');
    error.response = response;
    throw error;
  }
  return responseData.data;
}, function (error) {
  // 對響應錯誤做些什么
  return Promise.reject(error);
});

到此，關于“怎么將Vue3 Axios攔截器封裝成request文件”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！