Vue项目中有封装过axios吗？怎么封装的？-Vue面试指南

当前位置:　首页>> 技术小册>> Vue面试指南

在Vue项目中，通常会使用axios库来进行HTTP请求。为了方便统一管理和使用axios，我们可以封装一个axios实例，并通过Vue的原型将其注入到全局中。

下面是一个简单的封装示例：
```
// api.js
import axios from 'axios';

const instance = axios.create({
  baseURL: 'http://api.example.com',
  timeout: 10000,
});

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 添加token等公共请求头
    config.headers.Authorization = 'Bearer ' + localStorage.getItem('token');
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  (response) => {
    return response.data;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default instance;
```
这里我们使用axios的create方法创建了一个axios实例，并设置了一些默认的配置项，比如基础URL和超时时间。然后我们通过请求拦截器和响应拦截器来统一处理请求和响应，添加一些公共的请求头、处理错误等。

接下来我们可以在Vue的原型中注册这个axios实例，这样就可以在组件中直接使用this.$http来发送请求了。
```
// main.js
import Vue from 'vue';
import api from './api';

Vue.prototype.$http = api;
这样我们就完成了一个简单的axios封装。在组件中使用的时候，可以像下面这样调用：

javascript
Copy code
// 在组件中发送GET请求
this.$http.get('/users').then((response) => {
  console.log(response);
});

// 在组件中发送POST请求
this.$http.post('/users', { name: '张三', age: 18 }).then((response) => {
  console.log(response);
});
```
这种封装方式可以提高开发效率，也方便了后期的维护和管理。

该分类下的相关小册推荐：

TypeScript和Vue从入门到精通(四)

VUE组件基础与实战

TypeScript和Vue从入门到精通(三)

vue项目构建基础入门与实战

Vue.js从入门到精通(三)

Vue3技术解密

TypeScript和Vue从入门到精通(一)

Vue.js从入门到精通(一)

移动端开发指南

Vue.js从入门到精通(四)

vuejs组件实例与底层原理精讲

Vue.js从入门到精通(二)