Vue项目中axios请求的封装与配置

"Vue.js 中的 Axios 请求封装示例代码" 在 Vue.js 开发中，Axios 是一个常用的 HTTP 库，它基于 Promise，适用于浏览器和 Node.js 环境。Vue 官方推荐使用 Axios 进行数据请求，因为它提供了简洁的 API 和高效的性能。封装 Axios 主要有两个目的：一是便于后续的代码维护，二是可以对请求和响应进行定制化处理，如设置全局的请求头、处理错误等。 首先，要安装 Axios，可以通过 npm 命令完成： ```bash npm install axios ``` 接着，我们创建一个 `http.js` 文件来封装 Axios。首先导入 Axios： ```javascript import axios from 'axios'; ``` 为了适应不同的开发环境（如开发、测试、生产），我们需要设置接口请求的前缀。通常，我们会根据 `process.env.NODE_ENV` 的值来判断当前环境： ```javascript if (process.env.NODE_ENV === 'development') { axios.defaults.baseURL = 'http://dev.xxx.com'; } else if (process.env.NODE_ENV === 'production') { axios.defaults.baseURL = 'http://prod.xxx.com'; } ``` 在本地开发时，由于同源策略的限制，可能会遇到跨域问题。对于使用 Vue CLI 3 搭建的项目，可以在 `vue.config.js` 文件中配置代理来解决这个问题： ```javascript module.exports = { devServer: { proxy: { '/proxyApi': { target: 'http://dev.xxx.com', changeOrigin: true, pathRewrite: { '^/proxyApi': '' } } } } }; ``` 然后，更新 `http.js` 文件中的配置，使其在开发环境中使用代理： ```javascript if (process.env.NODE_ENV === 'development') { axios.defaults.baseURL = '/proxyApi'; } else if (process.env.NODE_ENV === 'production') { axios.defaults.baseURL = 'http://prod.xxx.com'; } ``` 除了设置基础 URL，还可以添加拦截器来处理请求和响应。例如，设置超时时间： ```javascript axios.defaults.timeout = 10000; ``` 以及为 POST 请求添加请求头信息： ```javascript axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'; ``` 封装 GET 和 POST 方法： ```javascript export function get(url, params) { return axios.get(url, { params }).then(response => response.data); } export function post(url, data) { return axios.post(url, data).then(response => response.data); } ``` 现在，你可以在 Vue 组件中便捷地使用这些封装好的请求方法： ```javascript import { get, post } from './http'; export default { data() { return { items: [] }; }, async created() { const response = await get('/api/items'); this.items = response; } }; ``` 通过这种方式，你可以统一管理所有请求，增加代码的可读性和可维护性，同时也能灵活应对各种环境下的网络请求需求。