Axios的理解与使用

（供自己后期复习使用,如果哪里不对希望大佬指正）

1.Axios是什么

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

2.Axios特性

1. 从浏览器中创建 XMLHttpRequests
2. 从 node.js 创建 http 请求
3. 支持 Promise API
4. 拦截请求和响应
5. 转换请求数据和响应数据
6. 取消请求
7. 自动转换 JSON 数据
8. 客户端支持防御 XSRF

3.安装（cdn、npm都可以，这里使用npm安装）

npm install axios

4.Axios常用的一些API

默认配置（列举了两个，其他的可以查看官网）

axios.defaults.timeout = 1000 // 设置全局超时时间
axios.defaults.baseUrl = ‘localhost:8080’ // 设置全局baseUrl

实例化

 axios.create([config])
可以创建一个新的axios，好处是当你请求两台端口、域名不一样的服务器的时候，你就可以创建两个实例化对象，然后各自的配置里面写好自己相关的信息（就比如配置各自的基地址），方便后面的获取数据。

const a = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
}) 

方法（只列举了一些比较常用的方法）

axios与axios的实例都可调用（这里用get和post举个例子，其他都类似用法）
1.axios(config)
  通用/最本质的发任意类型请求的方式

axios({
  method: 'post',  //这里可以修改为get请求
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

2. axios.request(config)
     等同于axios(config)
3. axios.get(url[, config])
     发get请求，从服务器端读取数据

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

4. axios.delete(url[, config])
     发delete请求，删除服务器端数据
5. axios.post(url[, data[, config]])
     发post请求，向服务器端添加新数据

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

6. axios.put(url[, data[, config]])
     发put请求，更新服务器端已经数据

注意：config都是一个对象，具有如下参数：
  url
  method
  baseURL
  headers
  params
  data
  timeout
  responseType
  responseEncoding
  withCredentials
  paramsSerializer
  transformRequest
  transformResponse

5.Axios拦截器

（1). 请求拦截器: 在真正发请求前, 可以对请求进行检查或配置进行特定处理的函数,
     包括成功/失败的函数, 传递的必须是config

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

（ 2). 响应拦截器: 在请求返回后, 可以对响应数据进行特定处理的函数,
    包括成功/失败的函数, 传递的默认是response

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