axios

一、网络模块的选择

Vue中发送网络请求有非常多的方式。
选择一：传统的Ajax是基于XMLHttpRequest(XHR)，真实开发中很少直接使用, 而是使用jQuery-Ajax。

选择二：jQuery-Ajax，重量级的框架。

选择三: 官方在Vue1.x的时候, 推出了Vue-resource.Vue-resource的体积相对于jQuery小很多.另外Vue-resource是官方推出的.在Vue2.0退出后, Vue作者就在GitHub的Issues中说明了去掉vue-resource, 并且以后也不会再更新.那么意味着以后vue-reource不再支持新的版本时, 也不会再继续更新和维护.对以后的项目开发和维护都存在很大的隐患。

选择四: 在说明不再继续更新和维护vue-resource的同时, 作者还推荐了一个框架: axios。axios有非常多的优点, 并且用起来也非常方便。

二、axios的功能

1.在浏览器中发送 XMLHttpRequests 请求
2.在 node.js 中发送 http请求
3.支持 Promise API
4.拦截请求和响应
5.转换请求和响应数据

三、axiox请求方式

支持多种请求方式：
axios(config)
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

步骤一：安装axios
指令：

npm install axios --save

步骤二：导入
在main.js文件中导入：

import axios from 'axios'

三、axios基本使用

axios({
   
   url: 'http://123.207.32.32:8000/home/multidata',
   // method: 'post'
}).then(res => {
   
   console.log(res);
   })

 axios({
   
   url: 'http://123.207.32.32:8000/home/data',
   // 专门针对get请求的参数拼接
   params: {
   
     type: 'pop',
     page: 1
   }
 }).then(res => {
   
   console.log(res);
 })

四、axios发送并发请求

使用axios.all, 可以放入多个请求的数组。axios.all([]) 返回的结果是一个数组，使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2。

axios.all([axios({
   
   url: 'http://123.207.32.32:8000/home/multidata'
 }), axios({
   
   url: 'http://123.207.32.32:8000/home/data',
   params: {
   
     type: 'sell',
     page: 5
   }
 })]).then(results => {
   
   console.log(results);
   console.log(results[0