在nuxt.js项目中对axios进行封装

不管是在服务端还是客户端获取数据都可以使用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