怎么将Vue3 Axios拦截器封装成request文件-Vue.js-PHP中文网

首页

web前端

Vue.js

怎么将Vue3 Axios拦截器封装成request文件

May 19, 2023 am 11:49 AM

vue3 axios request

1、创建一个名为request.js的新文件，并导入Axios：

import axios from &#39;axios&#39;;

登录后复制

2、创建一个名为request的函数，并将其导出：

创造一个函数名为request，并将其设定为一个带有基本URL的全新Axios实例。要在封装的 Axios 实例中设置超时，可以在创建 Axios 实例时传递 timeout 选项。

export const request = axios.create({
  baseURL: &#39;https://example.com/api&#39;,
  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 &#39;./request&#39;;

request.get(&#39;/users&#39;)
  .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 &#39;axios&#39;;

export const request = axios.create({
  baseURL: &#39;https://example.com/api&#39;,
  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中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn