在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）

原文出处及转载信息见文内详细说明，如有侵权，请联系 [e-mail] 删除。

原始发表时间：2019-09-16

本文参与腾讯云自媒体分享计划，欢迎正在阅读的你也加入，一起分享。

发表于 2019-09-17