Vue配置axios响应拦截器

一个项目会发送很多请求到后端,每个请求都有如下的响应

不想每个请求都去判断里面的status,那么可以使用axios的响应拦截器,对服务端返回的一些相同点做统一的处理

比如说如果有报错,就统一弹出这么个错误信息

在src目录下新建utils目录里新建api.js(名字随你自己)

原先弹出错误信息,可以直接只用

this.$message.error('请输入正确格式')

但是现在是在js文件里,需要额外单独引入

配置axios响应拦截器(其实也可以配置请求拦截器,就是在所有请求里添加什么什么什么,比如说统一添加请求头)

这里先介绍响应拦截器

import axios from 'axios'
import { Message } from 'element-ui';
import router from '../router'//导入文件夹,自动会去找里面的index.jsconst instances = axios.create({baseURL: 'http://localhost',});//响应拦截器
instances.interceptors.response.use(success=>{//这个success指的是调用接口成功console.log('响应拦截器,chenggong')},error=>{//接口根本没有调用到或者服务器挂了,各种原因console.log('响应拦截器,shibai',error)Message.error({message:error})
});// //可以在所有请求前添加前置路径
// let base='';// //封装请求并导出
// export const postRequest=(url,params)=>{
//     return axios({
//         method:'post',
//         url:'${base}${url}',
//         data:params
//     })
// }export default instances;

记得在main.js引入

引入的即为utils.api.js里导出的

下面第一张图用的是反引号,注意

Vue配置axios响应拦截器相关推荐

vue 项目 axios 响应拦截器统一判断401 (登录)过期
背景: 为了模拟token 过期,专门把token 设置错误,为401 界面把axios 官网里的复制到拦截器里放置到request.js 里在响应器里进行判断4**, 5** 状态码错误 ...
vue在axios响应拦截器中对状态码code进行相应处理
在axios拦截器中根据返回的状态码进行相应处理,如跳转页面,错误提示等 1.引入MessageBox与Message import { MessageBox,Message } from 'elem ...
Vue：Axios前端拦截器
需求描述限制用户多次点击按钮,频繁地发送同一个请求,影响页面渲染效果,降低前端的无效接口请求操作(其中涉及到Map.Array.Promise的一些基本操作). 解决方案由于所接触的是Vue项目, ...
axios的使用（请求，响应拦截器）
axios的使用本篇博客简要讲述本人在前端vue开发过程中对于axios的理解文章目录 axios的使用前言一.axios是什么? 二.使用步骤 1.引入库 2.axios使用 1,引用axi ...
axios（5）——请求拦截器和响应拦截器
1.axios访问流程 axios发送请求→axios请求拦截器→服务器→axios响应拦截器→then方法处理响应结果 2.使用代码讲解 <!DOCTYPE html> <html ...
axios 最全请求拦截器响应拦截器配置公共请求头超时时间以及get delete post put 四种请求传参方式
axios 拦截器请求拦截器请求拦截器的作用是在请求发送前进行一些操作例如在每个请求体里加上token,统一做了处理如果以后要改也非常容易响应拦截器响应拦截器的作用是在接收到响应后进行一些操 ...
Axios的Vue插件（添加全局请求/响应拦截器）
/** * @file Axios的Vue插件(添加全局请求/响应拦截器) */ // https://github.com/mzabriskie/axios import axios from ...
Vue中使用axios的响应拦截器处理请求失败的情况（处理token过期问题）以及登录成功跳转回原来页面问题
参考axios官方文档 // 响应拦截器 // Add a response interceptor request.interceptors.response.use(// 在2xx范围内的任何状态 ...
vue中axios请求拦截、响应拦截的配置
1.在vue项目的 src/ 文件夹下新建一个文件夹为 plugins,然后在 plugins/ 下新建 axios.js 文件,写入如下代码 import axios from 'axios' im ...

Vue配置axios响应拦截器

Vue配置axios响应拦截器相关推荐

最新文章

热门文章