axios请求失败重新发起请求_vue 封装 axios 请求

最新推荐文章于 2024-08-02 13:11:16 发布

weixin_39927214

最新推荐文章于 2024-08-02 13:11:16 发布

阅读量415

点赞数

文章标签： axios请求失败重新发起请求

本文链接：https://blog.csdn.net/weixin_39927214/article/details/112262750

版权

这篇博客介绍了在Vue项目中如何封装axios，实现请求失败后自动重试的功能。作者分享了在FETest项目的src目录下，utils文件夹中的request.js和http.js文件的配置方法，以及在main.js的全局配置和Home.vue组件中的应用实例。

摘要由CSDN通过智能技术生成

疫情期间和 wwz 一起合作，近日整理如下：

FETestsrcutilsrequest.js

import axios from 'axios'
import {
     message } from 'ant-design-vue';
const service = axios.create({
    
 timeout: 5000 // request timeout 请求后端接口，五秒内没有返回前端直接返回超时
})
service.interceptors.request.use(
 config => {
    
   // 请求头
   if (localStorage.getItem('token')) {
    
     config.headers['Authorization'] = `Bearer ${
    localStorage.getItem('token')}` || '';
   }
   return config
 },
 error => {
    
   return Promise.reject(error)
 }
)

service.interceptors.response.use(
 res => {
    
   // 登录成功 token 过期统一返回登录页
   if (res.data.errno =