一个项目会发送很多请求到后端,每个请求都有如下的响应
不想每个请求都去判断里面的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里导出的
下面第一张图用的是反引号,注意