将axios请求处理放在单独文件夹中
我们可以在vue项目src目录中新建一个api文件夹,专门用于存放axios请求处理,在api文件中新建两个文件,一个是index.js,一个是request.js,index.js用于写axios的配置相关信息,request.js则是将http请求集合起来。
api目录中的index.js如下:
import axios from 'axios'
axios.defaults.baseURL = `你的请求地址`;
// 添加请求拦截器
// 在发送请求之前做些什么
axios.interceptors.request.use((config)=>{
return config;
})
// 添加响应拦截器
axios.interceptors.response.use((response)=>{
// 对响应数据做点什么
return response
}, err=>{
// 对响应错误做点什么
return Promise.reject(err);
})
export default axios
api目录中的request.js如下:
import axios from '.' //这里表示导入同级的index
export function getList(){
return axios({
method: 'get',
url:"你自己写",
})
}
export function getDataList(){
return axios({
method: 'get',
url:"你自己写",
})
}
在使用的时候,直接在该页面的script中导入你所需要用到的axios请求处理,就上面这个request.js中写到的这些函数。例如下面这样
导入了请求处理函数之后就可以直接使用了
嗯,大概就这些