目录结构如下
request
request.js
api.js
一.在request.js中的步骤如下
1.引入axios
import aixos form 'axios';
2.创建axios实例
const instance = axios.create({
baseURL:'xxxxxx';
}
3.请求和响应拦截
请求拦截器的作用是在请求发送前进行一些操作,例如在每个请求体里加上token,统一做了处理如果以后要改也非常容易。
// 请求拦截(配置发送请求的信息)
axios.interceptors.request.use(function (config) {
// 处理请求之前的配置
return config
}, function (error) {
// 请求失败的处理
return Promise.reject(error)
})
响应拦截器的作用是在接收到响应后进行一些操作,例如在服务器返回登录状态失效,需要重新登录的时候,跳转到登录页。
// 响应拦截(配置请求回来的信息)
axios.interceptors.response.use(function (response) {
// 处理响应数据
return response
}, function (error) {
// 处理响应失败
return Promise.reject(error)
})
4.导出axios实例
export default instance;
二.在api.js中的步骤如下
1.引入request.js
import request from './request' ;
2.定义方法 a,保存请求地址url
const a = () => request.get ('/所调用的接口url')
3.导出方法 a
export default a
在需要调用接口的页面中引用方法 a
a().then((res) =>{
console.log(res);
}).catch((error) =>{
console.log(error);
})