49、axios 简介

1、什么是axios？

• Axios 是一个基于 promise 的 异步 ajax 请求库，前端最流行的 ajax 请求库。简单的讲就是可以发送get、post请求，负责与后端交互。
• Vue、React等框架的出现，促使了Axios轻量级库的出现， react/vue 官方都推荐使用 axios 发 ajax 请求。
• 因为Vue等，不需要操作Dom，所以不需要引入Jquery.js了

2、axios的特点？

1. 可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON类型的数据；
2. 拦截请求和响应（就是前端发送请求前，可以设置自动拦截请求，相当于给请求加条件）；
3. Axios 是一个基于 promise 的异步 ajax 请求库，支持promise所有的API ；
4. axios.all(promises): 批量发送多个（异步）请求；
5. axios在览器端/node 端都可以使用，在node环境使用http对象发送ajax请求；在浏览器端使用XMLHttpRequests对象发送ajax请求（XMLHttpRequest-来实现发送和接收HTTP请求与响应信息）。即创建 http 请求，向后端发送请求并接收 返回的数据；
6. 安全性更高，客户端支持防御 XSRF（跨站请求伪造），就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略；

 3、axios常用的两种请求方式

• axios({method:'方法'，url: '', baseURL: ''，data:{name: 'cc', sex: 'man'} })

axios({
    url: '/login',
    method: 'post',
    data:{
        name:'cc',
        sex: 'man',
    }
})

• axios.方法名(url, {name:'cc', sex:'man'})

axios.get(url[, config])   //get请求 用于列表和信息查询 
axios.delete(url[, config])  //删除
axios.post(url[, data[, config]])  //post请求用与提交数据，添加信息
axios.put(url[, data[, config]])  //更新操作 

//例如
axios.post('/login',{name:'cc', sex:'man'})

4、说下你了解的axios相关配置属性？ 

1. `url`是用于请求的服务器URL ；
2. `method`是创建请求时使用的方法,默认是get ；
3. `baseURL`将自动加在`url`前面，除非`url`是一个绝对URL。它可以通过设置一个`baseURL`便于为axios实例的方法传递相对URL ；
4. `headers`是即将被发送的自定义请求头；
5. `params`是即将与请求一起发送的URL参数，必须是一个无格式对象。params:{ID:12345}。

5、axios拦截器

在请求或响应被 then 或 catch 处理前拦截它们。

拦截器分为请求拦截器和响应拦截器：

1. 请求拦截器（interceptors.requst）是指可以拦截每次或指定HTTP请求，并可修改配置项。
2. 响应拦截器（interceptors.response）可以在每次HTTP请求后拦截住每次或指定HTTP请求，并可修改返回结果项。

先创建axios实例：

（1） 请求拦截器

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 发送请求前做什么
    if (store.getters.token) {
      // 若是有做鉴权token,就给头部带上token
    }
    return config
  },
  error => {
    // 在此定义请求错误需要做什么
    console.log(error)
    return Promise.reject(error)
  }
)

（2）响应拦截器

// 响应拦截器
service.interceptors.response.use(
  response => {
    if(response.headers['content-disposition']) { //处理下载文件
      return response
    }
    return response.data
  },
  error => {
    const response = error.response
    //显示后台返回message
    if (!response) {
      notification.error({
        message: error || 'error'
      })
      return Promise.reject(error)
    }
    
    const { data } = response
    if (response.status === 422) {
      // 返回状态码为422则重新登录
      if (data.message === 'Signature has expired') {
        store.dispatch('user/resetToken')
        notification.error({
          message: '重新登录',
          description: 'Authorization verification failed'
        })
        setTimeout(()=>{
          if(!store.getters.token) location.reload()
        },1000)
        return Promise.reject(error)
      }
    }

    notification.error({
      message: data.message || 'error'
    })
    return Promise.reject(data.message || 'error')
  }
)

（3）移除拦截器

axios.interceptors.request.eject(要移除的拦截器);

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

（4）添加拦截器

 axios实例.interceptors.request.use(function () {/*...*/});

var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});