axios封装+Toast提示

  • axios请求封装
  • 请求提示用vant的Toast:应对同时发送多个请求,这里使用了一个栈,队列也可以(仔细想想,好像队列更符合逻辑)
  • post请求数据用qs转换处理
import axios from 'axios'
import qs from 'qs';
import router from '../../router'
import { Toast } from 'vant';

const path = '';

// axios对象
const instance = axios.create({
  baseURL: '',
  timeout: 10000
})

let loadingToast = [];

// 请求拦截
instance.interceptors.request.use(
  function(config) {
    console.group('请求拦截');
    console.log(config);
    console.groupEnd();
    const loadingToastItem = Toast.loading({
      duration: 0,
      overlay: true
    });
    loadingToast.push(loadingToastItem);
    return config;
  },
  function(err) {
    return Promise.reject(err);
  }
);

// 响应拦截
instance.interceptors.response.use(
  function(response) {
    console.group('响应拦截');
    console.log(response);
    console.groupEnd();
    if (loadingToast.length > 0) {
      loadingToast.pop().clear();
    }
    return response;
  },
  function(err) {
    // console.log(err)
    Toast('网络错误!');
    if (loadingToast.length > 0) {
      loadingToast.pop().clear();
    }
    return Promise.reject(err);
  }
);

// get
export function get(url, params) {
  return instance.get(url, {
    params
  });
}

// post
export function post(url, data) {
  return instance.post(url, qs.stringify(data));
}

export function getPath() {
  return path;
}
原文地址:https://www.cnblogs.com/aahan/p/14139149.html