怎麼將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;

現在，每個經過預先定義攔截器的網路請求都可以透過應用程式中的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文件的詳細內容。更多資訊請關注PHP中文網其他相關文章！