Vue3 Axios拦截器封装成request文件的示例详解

import axios from 'axios';

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

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);
});

export default request;

import request from './request';

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

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);
});