Vue-cli中axios封装与接口代理实战

在Vue-cli开发环境中，基于axios封装复用请求是一种常见的优化实践，它可以提高代码的可维护性和模块化。本文将深入讲解如何在Vue-cli项目中实现axios的封装以及相关的设置。 首先，安装axios库是实现封装的基础。在命令行中运行`npm install axios --save`即可将axios添加到项目的依赖中，确保项目中的所有组件都能访问到axios库的功能。 接下来，配置接口代理至关重要。由于浏览器的同源策略限制，项目中的前端请求不能直接访问其他域名或端口的API。为了解决这个问题，Vue-cli提供了`config/index.js`中的`proxyTable`配置。在这个文件中，定义了一个规则，如`'/api': { target: 'http://47.95.xxx.246:8080', changeOrigin: true, pathRewrite: { '/api': '/' } }`。这段配置表示所有以`/api`开头的请求将被代理到指定的后端服务器地址，并且通过`changeOrigin`启用跨域支持。路径重写则确保前端可以继续使用相对路径访问API。 在`main.js`的入口文件中，为了在整个项目中方便地使用axios，我们需要将其注入到Vue实例的原型上，如`Vue.prototype.$http = axios;`。这样，任何Vue组件都可以通过`this.$http`来发起请求，而无需每次都导入axios。 封装后的请求示例变得简洁，如组件内的方法： ```javascript // 使用封装的axios发起GET请求 this.$http.get('/api/articles').then((res) => { console.log(res, '成功'); }, (err) => { console.log(err, '错误'); }); // 或者使用链式调用 this.$http.get('api/publishContent').then((res) => { console.log(res, '请求成功'); }, (err) => { console.log(err, '请求失败'); }); ``` 通过封装，我们可以避免在每个组件中都复制粘贴axios的基本配置，如请求头、超时等，从而提高代码的复用性。同时，统一的请求处理逻辑（如错误处理、状态码检查等）也有助于保持代码一致性。 总结来说，Vue-cli中的axios封装复用请求主要涉及安装axios库、配置接口代理、将axios挂载到Vue原型上以及创建封装后的便捷调用方法。通过这些步骤，可以有效地提升前端开发的效率和代码质量。