学习axios

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，它本身具有以下特征：
1.从浏览器中创建 XMLHttpRequest
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口（重要，方便了很多的操作）
5.从 node.js 创建 http 请求
6.拦截请求和响应
7.转换请求和响应数据
8.取消请求
9.自动转换JSON数据

axios 的github地址：https://github.com/axios/axios

中文网地址：http://www.axios-js.com/

发送请求基本用法：

GET请求的例子

// 通过url可以传递参数
axios.get('/test2?name=哈哈&age=18', {
  // 通过params也可以传递参数
  params:{
    sex: '男'
  }
})
//发起一个get请求.then
  .then(res => {
  console.log(res);
})
//这里使用箭头函数是为了防止this发生改变，因为箭头函数没有this

DELETE请求的例子

delete请求和get请求传参方式基本一样，不过一般delete用在restful风格的API上，URL会稍有不同

// 通过url可以传递参数
axios.delete('/test2?name=哈哈&age=18', {
  // 通过params也可以传递参数
  params:{
    sex: '男'
  }
})
  .then(res => {
  console.log(res);
})

POST请求的例子

post请求的传参可以有两种方式

方式1：

// 通过构造一个URLSearchParams对象传递
// let params = new URLSearchParams('name=如花&age=20');
let params = new URLSearchParams({
  name: '哈哈',
  age: 18
})
// URLSearchParams实例可以后续继续追加内容
params.append('sex', '男');
// 在第二个参数中将数据传递过去
axios.post('/test', params)
  .then(res => {
  console.log(res);
})

方式2：

// 直接在第二个参数中传递一个对象用来传参
// 不过这种方式，发送的请求的content-type:application/json 
// 所以需要服务端能解析传递的json类型的数据
axios.post('/test', {
  name: '哈哈',
  age: 18
})
  .then(res => {
  console.log(res);
})

PUT请求的例子

put请求传参的方式和POST请求传参的方式几乎一模一样，前面写的几中post的传参方式是一样的

let params = new URLSearchParams({
  name: '哈哈',
  age: 18
})
// URLSearchParams实例可以后续继续追加内容
params.append('sex', '男');
// 在第二个参数中将数据传递过去
axios.put('/test', params)
  .then(res => {
  console.log(res);
})

常见全局配置

所谓全局配置就是指，在请求发送之前对请求进行一个整体性的配置，常见的配置项有：

1. timeout 超时时间，请求发出后，多少毫秒后未得到响应，就按超时处理

   axios.defaults.timeout = 2000
   

2. baseURL 默认的请求地址前缀

   // 设置baseURL， 那么请求发出的地址就是：http://www.baidu.com/xxx/test
   axios.defaults.baseURL = 'http://www.baidu.com/xxx'
   axios.get('/test', params)
     .then(res => {
     console.log(res);
   })
   

3. headers 对请求头的一些设置

   axios.defaults.headers['xxx'] = '6666'
   

拦截器

axios的拦截器分为请求拦截器和响应拦截器两种

请求拦截器

请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易。

axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么，例如加入token
  // 这里我们可以添加一些配置
  console.log(config);
  config.headers['xxxx'] = '888888';
    // 别忘了返回config
  return config; 
}, function (error) {
  // 对请求错误做些什么处理
  // Promise.reject(reason)方法 可以返回一个带有拒绝原因reason参数的Promise对象。
  return Promise.reject(error);
});

响应拦截器

响应拦截器的作用是在接收到响应后进行一些操作，例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页

axios.interceptors.response.use(function (response) {
  // 在接收响应做些什么，例如跳转到登录页
  // 这里可以对响应的信息做一些处理
  return response; // 别忘了返回response
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});