在nuxt.js項目中對axios進行封裝

• 2019 年 10 月 4 日
• 筆記

不管是在服務端還是客戶端獲取數據都可以使用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