首页 > 其他分享 >怎么配置一个axios来拦截前后端请求

怎么配置一个axios来拦截前后端请求

时间:2024-08-03 15:23:50浏览次数:17  
标签:axios 请求 res request error import 拦截 response

首先创建一个axios.js文件

导入我们所需要的依赖

import axios from "axios";
import Element from 'element-ui'
import router from "./router";

设置请求头和它的类型和地址

注意先注释这个url,还没有解决跨域问题,不然会出现跨域

// axios.defaults.baseURL = "http://localhost:8081"
const request = axios.create({
    timeout: 5000,
    headers: {
//请求头的格式要求为json
        'Content-Type': 'application/json; charset=utf-8'
    }
})
request.interceptors.request.use(config => {
//将localStorage中的token放入请求头
    config.headers['Authorization'] = localStorage.getItem("token") // 请求头带上token
    return config
})

设置后端返回给前端数据的处理方式

//就是当后端返回给前端code的值来回馈不同的效果
request.interceptors.response.use(response => {
        let res = response.data;
        console.log("response")
        console.log(res)
        if (res.code === 200) {
            return response
        } else {
            Element.Message.error(res.msg? res.msg : '系统异常!', {duration: 3 * 1000})
            return Promise.reject(response.data.msg)
        }
    },
    error => {
        console.log(error)
        if(error.response.data) {
            error.message = error.response.data.msg
        }
        if(error.response.status === 401) {
            router.push("/login")
        }
        Element.Message.error(error.message, {duration: 3 * 1000})
        return Promise.reject(error)
    }
)

将他暴露出来

export default request

然后在main.js中修改

import axios from 'axios'
Vue.prototype.$axios = axios //

修改为

import request from "./axios";
Vue.prototype.$axios = request

就可以了

标签:axios,请求,res,request,error,import,拦截,response
From: https://blog.csdn.net/qq_55121347/article/details/140890983

相关文章

  • 记录一次错误,鸿蒙网络请求因未接收到token而报错
    项目场景:一个电商平台的项目问题描述明明添加了token拦截器但是在购物车界面却还是显示没有tokenexportfunctionhttpRequestGetWithToken(url:string,params?:string):Promise<BaseResp>{//获取tokenlettokenValue=DPUtils.getValue('token')asyncgetVal......
  • Android 11 关于按键拦截/按键事件处理分享
    系统在frameworks/base/services/core/java/com/android/server/policy/PhoneWindowManager.java处理按键事件,不管是物理按键还是SystemUI的nav_bar上的虚拟按键(使用了KeyEvent类中的,比如:KeyEvent.KEYCODE_VOLUME_UP).主要注意的有两个函数:interceptKeyBeforeDispatching......
  • Asp.Net Core 3.1 每次请求记录接口访问日志
    1publicclassRequestResponseLoggingMiddleware2{3privatereadonlyRequestDelegate_next;4privateRequestResponseLog_logInfo;56publicRequestResponseLoggingMiddleware(RequestDelegatenext)7{8_next=next;9......
  • vue3统一封装axios
    1.在src下新建文件夹apis在apis下新建一个index.ts2.在index.ts添加importaxiosfrom'axios';exportconsthttpInstance=axios.create();3.在终端输入npmrunlint确定文件没有问题4.定义并导出一个后端的数据类型exporttypeBkResponse={data:any;code:numb......
  • 使用Redisson和分库分表技术实现海量请求注册功能
    文章目录1.海量注册的常见问题和解决方案概述2.布隆过滤器判断用户唯一性3.通过分布式锁和快速失败策略对同一时间的某一个账号进行锁定4.数据库唯一索引兜底5.通过水平分库水平分表配置分片规则6.通过自定义线程池和异步初始化配置线程池操作异步化1.海量......
  • mybatis配置自动填充时间拦截器
    1.Annotation:①FillOnInsertimportjava.lang.annotation.ElementType;importjava.lang.annotation.Retention;importjava.lang.annotation.RetentionPolicy;importjava.lang.annotation.Target;@Retention(RetentionPolicy.RUNTIME)@Target......
  • 解决Leaflet地图初始化后更改容器宽度,新增部分瓦片没有请求问题
    当使用Leaflet初始化地图并在后续操作中动态更改地图容器的宽度时,可能会出现地图新增加的部分没有请求瓦片的情况。这是因为Leaflet在初始化时计算并缓存了地图的尺寸,当容器的尺寸发生变化时,地图没有自动刷新来适应新的尺寸。为了解决这个问题,需要在动态更改容器宽度后调用L......
  • 使用 $fetch 进行 HTTP 请求
    title:使用$fetch进行HTTP请求date:2024/8/2updated:2024/8/2author:cmdragonexcerpt:摘要:文章介绍了Nuxt3中使用\(fetch进行HTTP请求的方法,它是基于ofetch库,支持SSR和自动缓存。\)fetch简化了HTTP请求,支持GET、POST等,可结合useAsyncData或useFetch优化数据获取,避......
  • rpc请求调用
    RPC的请求调用一、远程过程调用(RPC)RPC(RemoteProcedureCall,远程过程调用)是客户端与区块链系统交互的一套协议和接口。用户通过RPC接口可查询区块链相关信息(如块高、区块、节点连接等)和发送交易。1.名词解释JSON(JavaScriptObjectNotation):一种轻量级的数据交换格......
  • “postman请求JSON格式,Body内数据无法被idea后端接收,值为null“问题的解决方式
    问题描述:传递数据一切正常,但是:原因剖析:这是因为我们实体类里面属性的命名格式不符合驼峰命名,比如我这种“大写字母开头如CAD”/“一个小写字母+一个大写字母如aDddddd”都不行。解决方法:方法1:不推荐,不好用把自己实体类中的属性的名字都改成标准格式,要么是“全小写如id......