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