不管是在服務端還是客戶端獲取數據都可以使用axios。在實際的開發過程中，每次請求中往往要攜帶一些自定義的參數或進行一些統一的處理，所以對axios進行封裝是必不可少的。那么對於axios封裝應該寫在那個目錄下呢？
我們開發的過程中將axios的封裝放在了plugins目錄下。內容大概如下：
plugins/request.js
function reqFun(method, urlName, params) { ... ... return new Promise((resolve, reject) => { ... ... instance[method](url, paramsNew).then((res) => { resolve(res.data.content); }).catch((error) => { if (axios.isCancel(error)) { console.log("請求超時") } else { if (error.response) { if (error.response.data && error.response.data.status == 18001001) { // 用戶未登錄 } else if (error.response.data && error.response.data.errorMsg) { const errMsg = error.response.data.errorMsg; // 錯誤信息 ：errMsg } } else { // 其他錯誤 } // 將錯誤傳出去 reject(error); } }); }); } const request = { get: (urlName, params) => reqFun('get', urlName, params), post: (urlName, params) => reqFun('post', urlName, params), delete: (urlName, params) => reqFun('delete', urlName, params), };
以上已經將方法封裝完成，那么在服務端和客戶端要怎么使用呢？
要將此方法注入到Vue實例和context中。 將內容注入Vue實例的方式與在Vue應用程序中進行注入類似。系統會自動將$添加到方法名的前面。
plugins/request.js
export default ({ app }, inject) => { inject('request', request) }
nuxt.config.js:
plugins: [ '@/plugins/request.js' ],
在context中使用：
asyncData(context) { context.app.$request.post('url', {}).then((data) => { console.log("data", data); }).catch((err) => { console.log("err", err.response.data); }) }
在vue實例this中使用：
this.$request.post('login_URL', {}).then((data) => { console.log(data) })
還可以在Vuex的actions/mutations方法中的this來調用 request 方法。
以上如果有說的不對的地方，歡迎指正~
願我們有能力不向生活繳械投降---Lin
本文分享自微信公眾號 - 女程序員的日常（gh_df41d619fb70）
原文出處及轉載信息見文內詳細說明，如有侵權，請聯系 yunjia_community@tencent.com 刪除。
原始發表時間：2019-09-16
本文參與騰訊雲自媒體分享計划，歡迎正在閱讀的你也加入，一起分享。
發表於 2019-09-17