axios封裝+Toast提示
阿新 • • 發佈:2020-12-15
- 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; }