首页 > 其他分享 >axios配置全局过滤器

axios配置全局过滤器

时间:2024-04-08 20:56:52浏览次数:33  
标签:axios res api user error 过滤器 全局 config

import axios from 'axios'

const service = axios.create({
    baseURL: '/api',  // 注意!! 这里是全局统一加上了 '/api' 前缀,也就是说所有接口都会加上'/api'前缀在,页面里面写接口的时候就不要加 '/api'了,否则会出现2个'/api',类似 '/api/api/user'这样的报错,切记!!!
    timeout: 5000
})

// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token,对请求参数统一加密
service.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8';
    let user = localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")) :{}
    console.log('serviceUser',user)
    if(user){
        config.headers['token'] = user.token;  // 设置请求头
    }

    return config
}, error => {
    return Promise.reject(error)
});

// response 拦截器
// 可以在接口响应后统一处理结果
service.interceptors.response.use(
    response => {
        let res = response.data;
        // 如果是返回的文件
        if (response.config.responseType === 'blob') {
            return res
        }
        // 兼容服务端返回的字符串数据
        if (typeof res === 'string') {
            res = res ? JSON.parse(res) : res
        }
        return res;
    },
    error => {
        console.log('err' + error) // for debug
        return Promise.reject(error)
    }
)


export default service

 

标签:axios,res,api,user,error,过滤器,全局,config
From: https://www.cnblogs.com/tk203/p/18122538

相关文章

  • vue 全局组件 局部组件
    全局组件:<script>//创建vue实例constapp=Vue.createApp({template:`<div><hello/><world/><hello-world/></div>`});//子组件//组件具备复用性//全局组件,只要定义了,处处可以使用,性能不高,但是使用起来简单......
  • Vue3 · 小白学习全局 API:常规
    全局API:常规本次笔记versionnextTick()defineComponent()defineAsyncComponent()defineCustomElement()1.version暴露当前所使用的Vue版本。类型string示例import{version}from'vue'console.log(version)2.nextTick()等待下一次DOM更新刷新的工具......
  • C++之静态变量和全局变量的区别
    全局变量和静态变量的存储方式是一样的,只是作用域不同。静态局部变量具有局部作用域只对定义自己的函数可见,只被初始化一次,自从初始化一次之后直到程序运行期间一直都在。静态全局变量具有全局作用域作用于定义它的程序文件但是不能作用于项目里的其它文件,这一点和全局变......
  • 关于Axios的异域问题
    需要建一个类,在类中修改需要访问的前端端口: 代码如下:importorg.springframework.context.annotation.Bean;importorg.springframework.context.annotation.Configuration;importorg.springframework.web.cors.CorsConfiguration;importorg.springframework.web.cors.UrlB......
  • 提取响应结果,生成全局变量:extract
    importastfromjsonpathimportjsonpathfromapi.tools.handle_attributeimportHandleAttr"""核心功能:鉴权参数依赖提取设置全局变量(设置类属性)"""classHandleExtract:"""思路:1、在excel中新增extract_data,用于存储提取数据的key以及提取......
  • axios快速入门
    一、环境配置1.1概述上古浏览器页面在向服务器请求数据时,因为返回的是整个页面的数据,页面都会强制刷新一下,这对于用户来讲并不是很友好。并且我们只是需要修改页面的部分数据,但是从服务器端发送的却是整个页面的数据,十分消耗网络资源。而我们只是需要修改页面的部分数据,也......
  • axios的理解和使用
    axios中文文档 https://www.axios-http.cn/docs/intro是什么前端最流行的ajax请求库react/vue官方都推荐使用axios发ajax请求 特点基本promise的异步ajax请求库浏览器端/node端都可以使用支持请求/响应拦截器支持请求取消请求/响应数据转换批量发送多个请求常用语法......
  • axios 常见状态码
    '100':'Continue','101':'SwitchingProtocols','102':'Processing','103':'EarlyHints','200':'Ok','201':'Created&......
  • vue axios sessionID 每次请求都不同的解决方式
    前端:        后端:注意:配置 allowedOrigins时,如果写的是http://localhost/,而请求的源地址是127.0.0.1。虽然它们通常指向同一台本地计算机,但在CORS规则中被视为不同的源。需更新更新allowedOrigins列表,将现有条目http://localhost:5174替换为http://127.......
  • javascript常见100问|前端基础知识|问ajax-fetch-axios-区别请用 XMLHttpRequestfetch
    00-开始前端基础知识HTMLCSSJSHTTP等基础知识是前端面试的第一步,基础知识不过关将直接被拒。本章将通过多个面试题,讲解前端常考的基础知识面试题,同时复习一些重要的知识点。为何要考察扎实的前端基础知识,是作为前端工程师的根本。基础知识能保证最基本的使用,即招聘......