在nuxt.js项目中对axios进行封装
在nuxt.js项目中对axios进行封装
用户3258338
发布于 2019-09-17 18:19:23
发布于 2019-09-17 18:19:23
不管是在服务端还是客户端获取数据都可以使用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
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2019-09-16，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读