vue全家桶进阶之路47：Vue3 Axios拦截器封装成request文件

Posted 2023-04-21 城南

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue全家桶进阶之路47：Vue3 Axios拦截器封装成request文件相关的知识，希望对你有一定的参考价值。

可以将Axios拦截器封装成一个单独的request文件，以便在整个应用程序中重复使用。

以下是一个示例，展示如何将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);
);