vue项目中如何封装axios的请求拦截和响应拦截步骤

在 Vue 项目中，可以通过以下步骤封装 axios 的请求拦截和响应拦截：

1. 安装 axios

   npm install axios --save

2. 创建一个 axios 实例

在项目中，一般会有多个接口请求，为了方便管理和配置，可以创建一个 axios 实例来处理所有的请求。在 `src` 目录下新建一个 `api` 文件夹，然后在该文件夹下新建一个 `http.js` 文件，输入以下代码：

   import axios from 'axios'
   
   const http = axios.create({
     baseURL: process.env.VUE_APP_BASE_URL,
     timeout: 5000,
     headers: {
       'Content-Type': 'application/json;charset=UTF-8'
     }
   })
   
   export default http

上述代码中，我们创建了一个名为 `http` 的 axios 实例，并设置了一些默认配置，如请求的基础 URL、请求超时时间、请求头等。

3. 设置请求拦截器

请求拦截器可以在请求发送前做一些处理，如添加请求头、添加 loading 等。在 `http.js` 文件中添加以下代码：

   http.interceptors.request.use(config => {
     // 添加 loading
     // ...
     
     // 添加请求头
     // ...
     
     return config
   }, error => {
     return Promise.reject(error)
   })

4. 设置响应拦截器

响应拦截器可以在接收到响应后做一些处理，如判断响应状态码、关闭 loading 等。在 `http.js` 文件中添加以下代码：

   http.interceptors.response.use(response => {
     // 判断响应状态码
     if (response.status === 200) {
       return Promise.resolve(response.data)
     } else {
       return Promise.reject(new Error(response.statusText))
     }
     
     // 关闭 loading
     // ...
   }, error => {
     return Promise.reject(error)
   })

5. 通过 `http` 实例发送请求

在需要发送请求的组件中，可以通过 `http` 实例发送请求。例如，获取用户列表的代码如下所示：

   import http from '@/api/http'
   
   export default {
     data() {
       return {
         userList: []
       }
     },
     mounted() {
       http.get('/user/list').then(res => {
         this.userList = res.data
       })
     }
   }

上述代码中，我们通过 `http` 实例发送了一个 GET 请求，请求的 URL 为 `/user/list`。请求成功后，将响应数据赋值给 `userList`。

通过以上步骤，我们就成功地封装了 axios 的请求拦截和响应拦截。在实际开发中，我们还可以根据项目需求进行更加复杂的封装。