fetch.js

/*
 * @Descripttion: 
 * 封装vue请求中（请求超时）+（网络不好）+（接口报错）
 * 全局弹框提醒
 */
import Vue from 'vue';
import axios from 'axios'; //引入axios
import { Toast } from 'vant';
import { Dialog } from 'vant';
axios.defaults.withCredentials = true
// 封装ajax
export function fetch(options) {
  // 添加加载中...
  const toast2 = Toast.loading({
    message: '获取数据中...',
    forbidClick: true,
    duration:0
  });
  // 获取url里的token值
  let TOKEN = 'aabbcc'//token换成从缓存获取
  //  method 请求方式未传入请求方式,默认POST
  options.method == 'GET' ? options.method = 'GET' : options.method = 'POST'
  return new Promise((resolve, reject) => {
    const instance = axios.create({ //instance创建一个axios实例，可以自定义配置，可在axios文档中查看详情
      baseURL: process.env.BASE_API, // api 的 base_url(config env.js中配置路径)
      //所有的请求都会带上这些配置，比如全局都要用的身份信息等。
      headers: {
        'Content-Type': options.contentType == "multipart/form-data" ? "multipart/form-data" : "application/json", //媒体格式类型
        'Authorization': TOKEN,  //Token从全局变量那里传过来
      },
      timeout: 30 * 1000, //30秒超时
      
    });
    instance.defaults.timeout = 30000;
    // 网络状态
    instance.interceptors.response.use(
      response => {
        toast2.clear()//在网络不好时清除加载中（否则会一直转点击不了确认我知道了）
        return response;
      },
      error => {
        if(error.message.includes('timeout')){   // 判断请求异常信息中是否含有超时timeout字符串
          // Toast('请求超时，请稍后再试')
          Dialog.alert({
            message: '请求超时，请稍后再试',
            confirmButtonText:'我知道了'
          }).then(() => {
            // on close
            toast2.clear()//在请求超时清除加载中（否则会一直转点击不了确认我知道了）
          });
          return Promise.reject(error);          // reject这个错误信息
        }
        // Toast('网络连接失败，请稍后再试')
        Dialog.alert({
          message: '网络连接失败，请稍后再试',
          confirmButtonText:'我知道了'
        }).then(() => {
          // on close
          toast2.clear()//在网络连接失败时清除加载中（否则会一直转点击不了确认我知道了）
        });
        return Promise.reject(error);
    });

    instance(options)
      // then 请求成功之后进行操作
      .then(response => {
        resolve(response); // 把请求到的数据发到引用请求的地方
      })
      // catch 请求异常之后进行操作
      .catch(error => {
        toast2.clear()//在接口报错时清除加载中（否则会一直转点击不了确认我知道了）
        var err;
        err = error.response
        if (err.status == 401) {
          Toast({
            message: 'Token失效请重新登录！',
            duration: 2000
          });
        } else {
          Toast({
            message: err.data.msg,
            duration: 2000
          });
        }
        reject(err);
      });
  });
}