vue axios简单封装以及思考

axios简介axios是一个基于Promise用于浏览器和nodejs的HTTP客户端，它本身具有以下特征： —————– •从浏览器中创建XMLHttpRequest •从node.js发出http请求•支持Promise API •拦截请求和响应•转换请求和响应数据•取消请求•自动转换JSON数据•客户端支持防止CSRF/XSRF先安装axios npm install axios的详细介绍以及用法就不多说了请移步github :right_arrow_selector:  https://github.com/axios在开发Vue应用时，我们经常需要与服务器进行数据交互，这时`axios`作为一个强大的HTTP库，就显得尤为重要。`axios`支持Promise API，方便我们进行异步操作，并且提供了诸如拦截器、请求取消等高级特性。本文将探讨如何对`axios`进行简单封装，以及在Vue项目中的使用方式。 `axios`的基本使用方法包括创建GET和POST请求。在Node.js环境中，它可以发出HTTP请求，而在浏览器中则创建XMLHttpRequest对象。`axios`还支持Promise，这意味着我们可以使用`.then()`和`.catch()`来处理异步操作的成功和失败情况。此外，它能自动处理JSON数据的转换，避免手动解析。为了简化代码并统一处理请求，我们可以创建一个名为`http.js`的文件来进行封装。在封装过程中，我们可以添加请求和响应拦截器。请求拦截器允许我们在发送请求前进行预处理，如设置默认配置或添加自定义头信息。响应拦截器则可以在收到服务器响应后执行操作，比如检查状态码并处理异常。以下是一个简单的`http.js`封装示例： ```javascript //导入axios和qs库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); }); //设置默认基础URL、Content-Type和超时时间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; //定义checkStatus方法，检查响应状态并返回数据或抛出错误function checkStatus(response) { if (response && (response.status === 200 || response.status === 304 || response.status === 400)) { return response.data; } else { throw new Error("网络异常"); } } //导出封装后的HTTP方法export default { post: (url, params) => axios.post(url, params).then(checkStatus), get: (url, params) => axios.get(url, { params }).then(checkStatus) }; ```在Vue项目中，我们可以在`main.js`中引入并挂载到Vue原型上，这样每个Vue组件都可以通过`this.$http`访问这些方法： ```javascript import Vue from "vue"; import App from "./App.vue"; import http from "./utils/http"; Vue.prototype.$http = http; new Vue({ render: h => h(App), }).$mount("#app"); ```这样，在Vue组件中，我们就可以直接调用`this.$http.post()`和`this.$http.get()`进行数据交互，无需每次都导入`http.js`。例如，在`helloworld.vue`组件中： ```javascript export default { methods: { async TestPost() { try { const res = await this.$http.post("/message/socketid", { account: "huangenai" }); console.log(res); } catch (error) { console.error(error); } }, async TestGet() { this.$http.get("/price").then(res => { console.log(res); }).catch(error => { alert(error); } } }; ```关于`checkStatus`函数的思考，这是一个可选的方法，可以根据项目需求来决定是否使用。它的主要作用是检查服务器返回的状态码，如果状态码为200、304或400，则返回数据；否则抛出错误。这样，我们可以在一个地方处理所有请求的返回状态，而不是在每个组件中单独处理，提高了代码的复用性和可维护性。当然，具体实现可以根据实际的后端接口状态码规范进行调整。总结起来，`axios`的封装使得我们能够在Vue应用中更便捷地进行网络请求，同时通过拦截器和`checkStatus`这样的辅助函数，可以更好地管理请求和响应，统一错误处理，提高代码质量。