安装axios库·安装·升优妙指

作者：编程小白 | 发布时间：2025-07-09 |

一、安装axios库

你得把axios这个库给安装了。你可以用npm或者yarn来装，命令就是这样的： ``` npm install axios ``` 或者 ``` yarn add axios ``` 装完之后，你就可以在你的项目中用axios了。

二、创建axios实例

接下来，你需要在项目的一个目录里（比如“utils”目录），创建一个新的文件，然后在里面创建一个axios实例： ```javascript import axios from 'axios'; const api = axios.create({ baseURL: '', timeout: 1000 // 设置超时时间，单位是毫秒 }); ``` 创建这个实例是为了在项目中多次使用，还能统一配置一些基础设置，比如基础的URL和超时时间。

三、封装请求方法

在同一个文件里，你可以添加一些封装好的请求方法： ```javascript export function get(url, params) { return api.get(url, { params }); } export function post(url, data) { return api.post(url, data); } ``` 这样封装后，你就可以在组件里用更简洁的方式来调用axios了，而且还能统一处理请求参数和响应结果。

四、处理请求拦截器和响应拦截器

为了在请求发送之前和响应到达之前做点事情，比如加个token啊，统一处理错误码之类的，你可以在文件里加请求拦截器和响应拦截器： ```javascript // 请求拦截器 api.interceptors.request.use(config => { // 添加token等操作 return config; }, error => { // 请求错误处理 return Promise.reject(error); }); // 响应拦截器 api.interceptors.response.use(response => { // 响应数据预处理 return response; }, error => { // 响应错误处理 return Promise.reject(error); }); ```

五、在组件中使用封装的axios工具类

在组件里，你可以直接用封装好的axios工具类来发请求： ```javascript import { get, post } from '@/utils/api'; export default { methods: { fetchData() { get('/data').then(res => { console.log(res); }).catch(err => { console.error(err); }); }, addData() { post('/add', { name: 'John' }).then(res => { console.log(res); }).catch(err => { console.error(err); }); } } } ``` 在上面的例子中，我们在组件的钩子函数里调用了封装的方法来获取数据，在方法里调用了封装的方法来添加数据。通过封装axios请求工具类，你可以简化代码，提高代码的维护性，还能统一处理请求和响应逻辑。主要的步骤有：安装axios库、创建axios实例、封装请求方法、处理请求拦截器和响应拦截器、在组件中使用封装的axios工具类。封装axios工具类可以让你的代码更简洁、可读，还能方便地处理请求和响应中的共性逻辑，比如添加token、统一处理错误等。建议你在项目一开始就进行封装，这样在后续的开发过程中可以更高效地管理网络请求。