在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