7.怎么配置一个axios来拦截前后端请求
创始人
2024-11-03 20:06:50

首先创建一个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 

就可以了

相关内容

热门资讯

裸辞做“一人公司”,我后悔了 去年这个时候,一位以色列程序员正在东南亚旅行。他顺手把一个在脑子里转了很久的想法做成了产品,一个让任...
南京建成国内首个Pre-6G试... 4月21日,2026全球6G技术与产业生态大会在南京开幕。全息互动技术展台前,一名远在北京的工作人员...
超梵求职受邀参加“2025抖音... 超梵求职受邀参加“2025抖音巨量引擎成人教育行业生态大会”,探讨分享优质内容传播,服务万千学员。 ...
摩托罗拉Razr 2026(R... IT之家 4 月 22 日消息,摩托罗拉宣布新一代 Razr 折叠手机将于 4 月 29 日在美国发...
库克卸任,特纳斯领航:苹果新纪... 苹果首席执行官蒂姆·库克将卸任,硬件工程主管约翰·特纳斯将接任,苹果公司今天宣布此事。 库克将在夏季...