封装vant组件Toast全局加载

目的

为了页面更加美观,在网速较慢的情况下,请求接口迟迟没有数据传递回来,封装Toast.loading,点击提交按钮时,触发请求,请求过程中显示加载弹窗,并且弹窗会遮挡整个页面的事件,不可点击

实现原理

在请求拦截器和响应拦截器里做这些事情,请求时触发toast.loading加载框,响应时关闭toast.loading：

1. 先在src目录下创建config文件夹；
2. 在文件夹中创建request.js文件；
3. 引入axios；
4. 引入qs(qs是查询字符串解析和将对象序列化的库,data中有数组的时候,是需要序列化才能与后台进行传递的)；
5. 引入Toast(前提引入了vant组件)；
6. 封装axios请求；
7. 请求拦截器触发；
8. 响应式拦截器触发。

话不多说,插代码

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;