1. 程式人生 > >vue使用封裝的axios

vue使用封裝的axios

vue使用封裝的axios

日常使用Vue的專案中,通常使用axios進行資料請求,但重複使用需要更好的進行‘包裝’一下。
以下是根據日常專案所用到的方法進行的封裝。

'use strict';
import axios from 'axios'
import qs from 'qs'

// 配置請求預設項
axios.defaults = {
    timeout: 10000,
    headers: {
        'Conent-Type': 'application/json'
    }
}
// 設定請求攔截器
axios.interceptors.request.use
(config => { // 可在這裡加請求資料的動效loading return config; }, error => { return new Promise.reject(error); }) // 設定響應攔截器 axios.interceptors.response.use(res => { // 在這裡取消請求資料的動效loading return res.data }, error => { // 在這裡取消請求資料的動效loading return Promise.reject(`響應code:${error.status}\n響應結果:
${error.response}`
) }) /** * 封裝axios.get請求 * @param {String} url [請求url地址] * @param {Object} params [請求攜帶引數] */ export const fetchGet = (url, params) => { return new Promise((resolve, reject) => { axios.get(url, { params: params }).then(res => { resolve
(res) }).catch(error => { reject(error); }) }) } /** * 封裝axios.post請求 * @param {String} url [請求url地址] * @param {Objeect} params [請求攜帶引數] * @param {String} responseType [響應資料格式] */ export const fetchPost = (url, params, responseType) => { return new Promise((resolve, reject) => { axios({ method: 'post', url: url, data: qs(params), responseType: responseType || 'json' }).then(res => { resolve(res) }).catch(error => { reject(error); }) }) } /** * 封裝axios.all併發請求 * @param {Array} queryList [請求配置項, eg:[{method:'get', url:'api/data'}]] */ export const fetchAll = (queryList) => { let query = queryList.map((item) => { if (item.method === 'get') { return fetchGet(item.url, item.params) } else { return fetchPost(item.url, item.params, item.responseType) } }); return new Promise((resolve,reject)=>{ axios.all(query).then(accpt=>{ resolve(accpt) }).catch(error=>{ reject(error); }) }) }