关于Vue中axios的封装实例详解

前言 axios 是 Vue 官方推荐的一个 HTTP 库，用 axios 官方简介来介绍它，就是： Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 作为一个优秀的 HTTP 库，axios 打败了曾经由 Vue 官方团队维护的 vue-resource，获得了 Vue 作者尤小右的大力推荐，成为了 Vue 项目中 HTTP 库的最佳选择。 虽然，axios 是个优秀的 HTTP 库，但是，直接在项目中使用并不是那么方便，所以，我们需要对其进行一定程度上的配置封装，减少重复代码，方便调用。下面，我们就来聊聊 Vue 中 axios 的封装。 在Vue项目中，axios是一个非常重要的工具，它被Vue官方推荐用于处理HTTP请求。axios是一个基于Promise的库，可在浏览器和Node.js环境中运行。它的优势在于简洁的API和高效的性能，使得它在Vue社区中逐渐取代了vue-resource，成为Vue项目中的首选HTTP库。 在实际开发中，直接使用axios可能会导致代码冗余和不便维护。因此，对axios进行封装是非常必要的。封装的核心目标是减少重复代码，提高代码复用性，并且方便后续的维护和扩展。通常，我们可以将封装代码放在独立的http.js或http.ts文件中，以便更好地组织和管理。 封装axios的第一步是创建一个axios实例，这可以通过调用axios.create()方法实现。在这个实例中，我们可以设置各种配置项，如超时时间、请求头等。例如： ```javascript import axios from 'axios'; const service = axios.create({ baseURL: process.env.NODE_ENV === 'production' ? `/java` : '/apis', timeout: 10000, headers: { get: {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'}, post: {'Content-Type': 'application/json;charset=utf-8'}, }, withCredentials: true, }); ``` 这里的baseURL可以根据环境变量NODE_ENV来区分开发环境和生产环境，确保请求地址的正确性。同时，设置了默认的请求头，适用于大多数情况，特殊情况可以通过传递自定义参数来覆盖这些默认配置。 在处理跨域和超时问题时，我们可以设置axios实例的`withCredentials`属性为true，启用跨域请求的cookie携带，以及通过`timeout`属性设定请求超时时间。对于响应码处理，可以通过`validateStatus`属性自定义HTTP状态码的验证规则，确保只有成功状态的请求才被resolve，其他状态则被reject，这样可以统一处理异常情况。 在使用async-await时，为了简化错误处理，可以自定义axios拦截器来统一处理所有请求和响应的错误。这样，无论是在组件内还是在服务层，都可以避免在每个请求后面都添加catch块，提高代码的整洁度和可读性。 ```javascript service.interceptors.request.use(config => { // 在发送请求之前做些什么，例如添加Token return config; }, error => { // 对请求错误做些什么 Promise.reject(error); }); service.interceptors.response.use(response => { // 对响应数据做点什么 return response; }, error => { // 对响应错误做点什么 return Promise.reject(error); }); ``` 通过这种方式，我们可以构建一个灵活且易于维护的axios封装模块，为Vue项目中的HTTP请求提供强大的支持。封装不仅提高了代码的可复用性，还降低了维护成本，使得整个项目的架构更加清晰和高效。