axios 一個實用的 http 請求庫,github 上已介紹其特性、兼容性、安裝、簡單使用、配置項等。基於上述官方介紹,封裝了一下請求方式:ios
import axios from 'axios' // 多環境配置 const baseURL = process.env.NODE_ENV === 'development' ? 'http://localhost:4000' : 'http://localhost:4000' // 請求攔截器(避免重複請求) axios.interceptors.request.use( config => { let requestName = config.data.requestName if (requestName) { if (axios[requestName] && axios[requestName].cancel) { axios[requestName].cancel(`${requestName} 請求被取消`) } config.cancelToken = new axios.CancelToken(c => { axios[requestName] = {} axios[requestName].cancel = c }) } return config }, error => { return Promise.reject(error) } ) // 響應攔截器(判斷後臺返回的狀態碼) axios.interceptors.response.use( config => { return config }, error => { console.log(error) let errMsg = '' if (error && error.response) { const map = new Map([ [400, '錯誤請求'], [401, '未受權,請從新登陸'], [403, '拒絕訪問'], [404, '請求錯誤,未找到該資源'], [405, '請求方法未容許'], [408, '請求超時'], [500, '服務器端出錯'], [501, '網絡未實現'], [502, '網絡錯誤'], [503, '服務不可用'], [504, '網絡超時'], [505, 'http版本不支持該請求'] // ... ]) const defaultErrorMsg = `鏈接錯誤,服務器返回的狀態碼爲 ${error.response.status}` errMsg = map.get(error.response.status) || defaultErrorMsg } else { errMsg = "鏈接到服務器失敗" } return Promise.reject(errMsg) } ) // get、post 請求方式地統一封裝 export default ({ url, data = {}, params = {}, ...args }) => { return new Promise((resolve, reject) => { axios({ baseURL, url, params, data: { ...data, requestName: url.split('/').slice(-1).pop() }, ...args }) .then(res => resolve(res)) .catch(err => { // 這裏能夠用全局 UI 函數提醒用戶 reject(err) }) }) } // 請求舉例 /** get 請求: await request({ method: 'get', url: '/user/12345', params: { name: 'Bob', age: 20 } }) post 請求: await request({ method: 'post', url: '/user/12345', data: { name: 'Bob', age: 20 } }) */
請求以前作數據轉換?建立 axios 示例?axios 全局默認配置... 這些在 github 上官方已給出示例。git