首页 > 其他分享 >axios封装

axios封装

时间:2022-10-12 14:56:12浏览次数:39  
标签:axios return service error 封装 config response

vue项目
引入axios
import axios from 'axios'

创建axios

const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API, 
    timeout: 5000,
    headers: {
      "Content-Type": "application/json;charset=utf-8"
  })

请求拦截

service.interceptors.request.use(
 config => {
   config.headers = config.headers || {}
   if (localStorage.getItem('token')) {
     config.headers.token= localStorage.getItem('token') || ''
   }
   return config
 },
 error => {
   console.log(error)
   return Promise.reject(error)
 }
)

****响应拦截

service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code !== 200) {
       if (error.response.status == 401) {
          localStorage.removeItem("token");
          setTimeout(()=> {
            window.location.reload()
          }, 500)
          return Promise.reject(res.messge)
        }
        return Promise.reject(error.response.data || 'Error')
    } else {
      return res
    }
  },
  error => {
    // elementui 组件
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

标签:axios,return,service,error,封装,config,response
From: https://www.cnblogs.com/mdtayz/p/16784296.html

相关文章

  • axios 请求拦截器&响应拦截器
    一、拦截器介绍一般在使用axios时,会用到拦截器的功能,一般分为两种:请求拦截器、响应拦截器。请求拦截器在请求发送前进行必要操作处理,例如添加统一cookie、请求体加验......
  • Java 封装
    /***obj_4*/publicclassEncapTest{privateStringname;privateintage;publicintgetAge(){returnthis.age;}publicStringgetName......
  • Integer和int的区别?为什么要设计封装类?
    Integer和int的区别:1.Integer默认值是null,int是0;int只需要定义类型直接赋值,而Integer需要创建对象2.Integer值存储在堆内存里面,int是存储在栈空间里面3.Integer作为对象......
  • React-Hooks怎样封装防抖和节流-面试真题
    Debouncedebounce原意消除抖动,对于事件触发频繁的场景,只有最后由程序控制的事件是有效的。防抖函数,我们需要做的是在一件事触发的时候设置一个定时器使事件延迟发生,在......
  • axios二次封装
    importaxiosfrom'axios';importnprogressfrom'nprogress';import{messageasMSG}from'antd';constbaseURL='';constservice=axios.create({bas......
  • 15、JAVA入门——封装
    目录​​ 一、封装​​​​      1、封装概述​​​​   2、封装的步骤​​​​二、Java里的包​​​​      1、包的概述​​​​      2、包的......
  • python内置模块loggin日志实现单例封装
    1importlogging2fromconfigs.global_dataimportLogger345classLogHandler:6obj=None78def__init__(self):9self.file......
  • axios完整配置请求数据
    <scripttype="module">importaxiosfrom'./lib/axios.min.js'//axios完整配置请求语法:axios(config)axios({url:'/admin/detail',//url会拼接在......
  • Axios 取消重复请求
    在实际开发中,我们需要对用户发起的重复请求进行拦截处理,比如用户快速点击提交按钮解决办法1、新建request.jsimportaxiosfrom'axios'//创建axios实例constse......
  • #yyds干货盘点#前端架构API层的封装
    上午好,今天为大家分享下个人对于前端​​API​​​层架构的一点经验和看法。架构设计是一条永远走不完的路,没有最好,只有更好。这个道理适用于软件设计的各个场景,前端​​API......