1. 程式人生 > 實用技巧 >axios封裝+Toast提示

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;
}