import axios from 'axios' // 請求超時設置 axios.defaults.timeout = 3000 /* * 設置生產環境/開發環境下的請求基路徑(需後臺設置容許跨域) * 開發環境下的跨域,也可以使用webpack的devServer來設置proxy代理的方式來解決 */ if(process.env.NODE_ENV === 'production') { axios.defaults.baseURL = 'http://127.0.0.1:5050/' }else if(process.env.NODE_ENV === 'development') { //設置開發環境下的請求基路徑, 若是是使用了webpack的devServer,來設置了代理,那麼此處就不需設置了 } // 添加request攔截器 axios.interceptors.request.use((config) => { // do something, 如接口請求的loading處理 return config }, (error) => { return Promise.reject(error) }) // 添加response攔截器 axios.interceptors.response.use((response) => { // do something return response }, (error) => { return Promise.reject(error) }) /** * @func * @desc axios 請求封裝 * @param {object} req - 請求接口須要的url,method,請求頭等基礎信息 * @param {object} params - 請求接口須要請求的參數 */ const http = (req, params) => { return new Promise((resolve, reject) => { let para = {} if ((['get', 'delete', 'head', 'options'].indexOf(req.method) > -1)) { para = { params: params || {} } } if ((['post', 'put', 'patch'].indexOf(req.method) > -1)) { para = { data: params || {} } } axios({ ...req, ...para }).then((response) => { if(response.status === 200) { resolve(response) }else { alert(response.data.message) } }).catch((error) => { reject(error) }).finally(() => { }) }) } // 定義全部接口請求的信息 const url = { movie: { url: '/movie/query', method: 'get' }, book: { url: '/book/query', method: 'get' } } export { http, url } /** * 使用方式示例: http(url.movie).then((res) => { this.result = res.data.info }) */
說明:實質的封裝從const http開始,請求基路徑設置的部分,暫時能夠忽略,後面會單獨對環境變量process.env.NODE_ENV進行分析實踐和記錄。
以上代碼的封裝基礎爲:https://www.npmjs.com/package/axios,axios的版本爲:^0.19.0javascript