axios封装，使用拦截器统一处理接口，超详细的教程（推荐）

axios封装，使用拦截器统一处理接口，超详细的教程

为什么需要封装、使用拦截器统一处理接口？

在实际开发中，我们经常会使用到Ajax技术，而Axios是一个比较好用的Ajax库。但是，使用 Axios 发送请求的时候，我们遇到的一些问题：

1. 大量重复代码：每次请求都要写一堆重复的代码，如设置 headers，处理错误等。
2. 统一处理后端返回的数据：由于每个接口返回的数据格式不同，我们需要在每个接口里单独处理这些数据格式，非常麻烦。
3. 统一处理请求错误：如果每个接口都单独处理请求错误，那么就会出现很多重复代码。如果统一处理，则会减少代码重复。

因此，我们需要对 Axios 进行封装，并使用拦截器来解决上述问题。

Axios 封装

1. 安装 Axios：

npm install axios --save

1. 创建一个 Axios 实例

```javascript
import axios from 'axios'

const instance = axios.create({
baseURL: 'http://localhost:3000', //设置请求的基本URL
timeout: 1000, // 设置超时时间
withCredentials: true // 跨域请求时是否需要携带 cookie
})
```

1. 创建一个 http.js 文件，并导出封装好的 Axios 实例

```javascript
import axios from 'axios'

const instance = axios.create({
baseURL: 'http://localhost:3000', //设置请求的基本URL
timeout: 1000, // 设置超时时间
withCredentials: true // 跨域请求时是否需要携带 cookie
})

// 添加请求拦截器
instance.interceptors.request.use(
config => {
// 在发送请求前做些什么，如添加 token
config.headers.Authorization = getToken()
return config
},
error => {
// 对请求错误做些什么
return Promise.reject(error)
}
)

// 添加响应拦截器
instance.interceptors.response.use(
response => {
// 对响应数据做点什么
return response.data
},
error => {
// 对响应错误做点什么
return Promise.reject(error)
}
)

// 导出 http 实例
export default instance
```

1. 在项目中使用

```javascript
import http from './http'

http.get('/user').then(res => {
console.log(res)
})

http.post('/login', { username: 'admin', password: '123456' }).then(res => {
console.log(res)
})
```

这里我们使用了 get 和 post 两种请求方式，但实际上 Axios 还支持其他请求方式。

示例一：统一处理 HTTP 错误码

在项目中，我们可能会遇到 HTTP 错误码不为 200 的情况，通常情况下这些错误应该被拦截并提示给用户。

我们可以通过在响应拦截器中进行判断，如果 HTTP 状态码不为 200，就弹出错误提示框。

// http.js

import axios from 'axios'
import { Message } from 'element-ui'

const instance = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 1000,
  withCredentials: true
})

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 在发送请求前做些什么
    return config
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 响应拦截器
instance.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    if (response.status !== 200) {
      // 判断HTTP状态码是否为200，如果不是则提示错误消息
      Message.error('请求失败，请联系管理员')
      return Promise.reject(response.data)
    } else {
      return response.data
    }
  },
  error => {
    // 对响应错误做点什么
    return Promise.reject(error)
  }
)

export default instance

示例二：在请求头中添加 Token

在前后端分离的项目中，通常需要使用 Token 权限验证，而 Token 又是存储在前端本地的，因此我们需要在发送每个请求前将 Token 添加到请求头中。

// http.js

import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 1000,
  withCredentials: true
})

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 在发送请求前做些什么
    const token = getToken()
    if (token) {
      config.headers.Authorization = token
    }
    return config
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 响应拦截器
instance.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    return response.data
  },
  error => {
    // 对响应错误做点什么
    return Promise.reject(error)
  }
)

export default instance

这样，每次发送请求都会把 Token 添加到请求头中，而 Token 的获取则可以根据项目需求自行实现。