Vue配置axios响应拦截器_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.js
  
 
const 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里导出的

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