目的
为了页面更加美观,在网速较慢的情况下,请求接口迟迟没有数据传递回来,封装Toast.loading,点击提交按钮时,触发请求,请求过程中显示加载弹窗,并且弹窗会遮挡整个页面的事件,不可点击
实现原理
在请求拦截器和响应拦截器里做这些事情,请求时触发toast.loading加载框,响应时关闭toast.loading:
- 先在src目录下创建config文件夹;
- 在文件夹中创建request.js文件;
- 引入axios;
- 引入qs(qs是查询字符串解析和将对象序列化的库,data中有数组的时候,是需要序列化才能与后台进行传递的);
- 引入Toast(前提引入了vant组件);
- 封装axios请求;
- 请求拦截器触发;
- 响应式拦截器触发。
话不多说,插代码
import axios from "axios";
import qs from "qs";
import { Toast } from 'vant';
//开发环境 请求地址自己填
var host;
if(process.env.NODE_ENV === 'development'){
host=""
}else{
host=""
}
//请求
var instance = axios.create({
baseURL: host,
timeout:5000
})
//请求拦截器
var load = null;
instance.interceptors.request.use(config => {
//config代表的是所有的请求信息
//console.log("触发了请求拦截器");
load=Toast.loading({
duration: 0,
message: '加载中...',
forbidClick: true,
});
//如果当前是post请求,使用qs处理一下参数
if (config.method.toLocaleLowerCase() == "post") {
//qs.stringify():将对象序列化成url的形式;以&进行拼接
config.data = qs.stringify(config.data);
}
if (config.method.toLocaleLowerCase() == "get") {
config.params = config.data;
}
return config;
}, err => {
return Promise.reject(err);
})
//响应拦截器
instance.interceptors.response.use(response => {
//response 后台返回的所有的数据
//console.log("触发了响应拦截器");
//关闭loading
Toast.clear(); // 清除加载
return response.data;
}, err => {
Toast.clear(); // 清除加载
return Promise.reject(err);
})
export default instance;