怎么将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文件”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！