vue axios 简单封装以及思考
axios 简介
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：
--------------------------------------------------------------------------------
•从浏览器中创建 XMLHttpRequest
•从 node.js 发出 http 请求
•支持 Promise API
•拦截请求和响应
•转换请求和响应数据
•取消请求
•自动转换JSON数据
•客户端支持防止 CSRF/XSRF
先安装 axios
npm install axios
axios的详细介绍以及用法 就不多说了请 移步 github ➡️ https://github.com/axios/axios
下面是简单的封装一个 http.js， 在此说明 checkStatus 这个方法呢 是不一定需要的 ，根据个人的项目需求吧，也可以直接返回response，交给后面另行处理也行。
或者根据后端返回的状态，在里面进行处理 也行。
"use strict";
import axios from "axios";
import qs from "qs";
//添加请求拦截器
axios.interceptors.request.use(
config => {
return config;
},
error => {
return Promise.reject(error);
}
);
//添加响应拦截器
axios.interceptors.response.use(
response => {
return response;
},
error => {
return Promise.resolve(error.response);
}
);
axios.defaults.baseURL = "https://www.xxxx/api";
axios.defaults.headers.post["Content-Type"] = "application/json";
axios.defaults.headers.post["X-Requested-With"] = "XMLHttpRequest";
axios.defaults.timeout = 10000;
function checkStatus(response) {
return new Promise((resolve, reject) => {
if (
response &&
(response.status === 200 ||
response.status === 304 ||
response.status === 400)
) {
resolve(response.data);
} else {
reject({
state: "0",
message: "网络异常"
});
}
});
}
export default {
post(url, params) {
return axios({
method: "post",
url,
data: params
}).then(response => {
return checkStatus(response);
});
},
get(url, params) {
params = qs.stringify(params);
return axios({
method: "get",
url,
params
}).then(response => {
return checkStatus(response);
});
}
};
在vue 项目中，main.js这个文件
import http from "./utils/http"; Vue.prototype.$http = http;
使用 helloworld.vue
...
methods: {
async TestPost() {
try {
const res = await this.$http.post("/message/socketid", {
account: "huangenai"
});
console.log(res);
} catch (error) {
console.log(error);
}
},
async TestGet() {
this.$http
.get("/price")
.then(res => {
console.log(res);
})
.catch(error => {
alert(error);
});
}
}
....
在main.js中将http.js import 进来 并暴露到全局使用，在任何vue 页面中 就不再需要 import http.js了，而直接通过 this.$http.post this.$http.get 来使用，在checkStatus中统一异步返回，顺便可以处理错误的情况。
个人思考：
checkStatus方法 返回了一个 Promise
链式结构的话看上面那个get的方法，this.$http.get(...).then(...).catch(...)，如果then 里面又来一个 http请求 会一层包住一层。
如果使用了语法糖 async await ，虽然 看起来好像是简单了 不用 一层包住一层 层层嵌套，可是你必须要用到 try catch，如果出现异常 则直接到catch，不会再执行下面到方法。如果再实际业务中，就算出现了某一个http请求失败到情况，不影响下面的逻辑要继续跑下去呢，这个就不适用了。链式结构也是 如果catch到异常 也不会执行then 里面到方法了。
所以，是否把返回的Promise，全部都返回的是 resolve，那么 就不会说出现直接到了 catch 里面不执行以下的业务了逻辑了呢。而且如果使用了语法糖 await 代码看起来更加简洁 也不需要 try catch了， 这样的话 reject是不是就不需要用到了呢。
function checkStatus(response) {
return new Promise(resolve => {
if (
response &&
(response.status === 200 ||
response.status === 304 ||
response.status === 400)
) {
resolve(response.data);
} else {
resolve({
state: "0",
message: "网络异常"
});
}
});
}
个人觉得这两种方案各有优劣，实际应用中还是应该根据个人业务需求 业务情况而定。
相关文章
这篇文章主要介绍了vue 中url 链接左边的小图标更改问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-12-12
这篇文章主要介绍了vue-cli3 取消eslint校验代码的解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
今天小编就为大家分享一篇Vue v-for循环之@click点击事件获取元素示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
本篇文章主要介绍了Vue响应式原理详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
在Vue2.x中，编写组件的方式是使用Options API，它的特点是在对应的属性中编写对应的功能模块，这篇文章主要介绍了Vue组合式API--setup中定义响应式数据详解,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了vue权限管理系统的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要介绍了Vue自定义全局Toast和Loading,需要的朋友可以参考下2019-04-04
本文通过实例代码给大家一个简单的基于vue.js实现的编辑菜谱功能，代码简答易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧2018-05-05
Vue3在css中使用v-bind绑定js/ts变量(在scss和less中使用方式)
v-bind是Vue.js中的一个核心指令,用于在Vue组件或DOM元素上绑定数据属性,下面这篇文章主要给大家介绍了关于Vue3在css中使用v-bind绑定js/ts变量的相关资料,也可以在scss和less中使用方式,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了详解Vue中组件传值的多重实现方式,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-08-08
最新评论