axios基本使用

axios的定义

1. axios是基于promise的用于浏览器和nodejs的HTTP客户端。与ajax类似，都是用于处理网络请求，进行数据的发送与接收
2. axios本身就是一个promise，可以使用promise语法，使用then函数来显示具体的操作
3. axios的基本参数。axios的参数为对象，在对象中有url、method等参数。url代表要连接的url地址，method代表连接的方式，可以为get方法，也可以为post方法

axios({
  method: 'get',
  url: '/user',
  params: {
    type: 'pop',
    page: 1
  }
}).then(res => {
	console.log(res);
})

发送并发请求

1. 在项目中，有时需要同时发送两个请求，这种情况下不能够直接发送请求，需要发送并发请求，使用axios.all实现
2. axios.all([])的参数与返回值均为数组类型，可以传递多个并发请求

axios.all([axios({
  url: '/home'
}), axios({
  url: '/home/data',
  params: {
    type: 'sell',
    page: 2
  }
})]).then(res => {
  console.log(res);
});

3. axios.all返回值为数组类型，使用axios.spread可以将数组中每一条数据分别提取出来

axios.all([axios({
  url: '/home'
}), axios({
  url: '/home/data',
  params: {
    type: 'sell',
    page: 2
  }
})]).then(axios.spread((res1, res2) => {
  console.log(res1);
  console.log(res2);
}));

axios的全局配置

1. 在axios中，传输数据的时候，经常会出现一些重复性的属性，像是baseURL、timeout等属性。在每次传输时都进行配置的话很复杂
2. 使用全局配置对那些每个axios都使用的属性来进行配置。在全局中使用axios.defaults.属性进行全局配置

axios.defaults.baseURL = 'http://127.0.1:8080'
axios.defaults.timeout = 3000

3. 需要注意的是：当method不同时，代表参数的属性也不同
4. 当method为post方法时，代表参数的属性为data；而method为get方法时，代表参数的属性为params

// get方式
axios({
  url: '/home',
  method: 'get',
  params: {
    name: 'admin',
    password: '123'
  }
})

// post方式
axios({
  url: '/home',
  method: 'post',
  data: {
    name: 'admin',
    password: '123'
  }
})