Axios的拦截器介绍以及封装配置

axios

基于promise用于浏览器和node.js的http客户端

支持浏览器和node.js

支持promise

能拦截请求和响应

自动转换JSON数据

能转换请求和响应数据

axios的拦截器原理如下：

 axios作为网络请求的第三方工具, 可以进行请求和响应的拦截

axios 全局配置：

#  配置公共的请求头 
axios.defaults.baseURL = 'https://api.example.com';
#  配置 超时时间
axios.defaults.timeout = 5000;
#  配置公共的请求头
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
# 配置公共的 post 的 Content-Type
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

请求拦截器

请求拦截器的作用是在请求发送前进行一些操作，主要处理 token的统一注入问题

响应拦截器

响应拦截器的作用是在接收到响应后进行一些操作，主要处理返回的数据异常 和数据结构问题

 基本代码：

// 导出一个axios的实例  而且这个实例要有请求拦截器 响应拦截器
import axios from 'axios'
const service = axios.create() // 创建一个axios的实例
service.interceptors.request.use() // 请求拦截器
service.interceptors.response.use() // 响应拦截器
export default service // 导出axios实例

封装axios:

// 封装axios
import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://gees.it.net/v1_0/',
  timeout: 5000
})

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

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

export default instance