Vue中的网络请求模块 — axios

why需要进行网络模块的封装
当我们在使用第三方框架进行网络请求时，如果不进行封装，直接的使用，那么，如果某一天，第三方框架宣布不再维护之后，这意味着以前使用这个框架的项目后期可能会由于版本问题出现各种各样的bug，在后期更换框架的过程中，将会是一个麻烦的大工程，所以在使用第三方框架进行网络请求时，需要对网络模块进行封装。即使该框架后期不再维护，我们只需要将对应封装模块中的框架更改即可。

why要使用axios进行网络模块的封装

对于传统的 ajax 来说，它是基于XMLHttpRequest(XHR)，但是它的配置和调用方式非常混乱，在真实的开发中很少使用，而是使用jQuery-Ajax。
那为什么不使用jQuery中的Ajax呢？由于在vue开发中基本上不会用到jquery，而为了一个网络请求去引入jquery这个框架，就显得得不偿失了。
而在vue1.x时，推出了Vue-resource，并且vue-resource的体积也比jquery小很多，但是，在Vue2.0之后，该作者表示后期不再更新Vue-resource，而是推荐可以使用axios来代替，所以说，我们可以使用axios进行网络模块的封装

1、axios的特点

• 可以在浏览器中发送XMLHttpRequests请求
• 可以在node.js中发送http请求
• 支持Promise API
• 拦截请求和响应
• 转换请求和响应数据

2、axios请求方式

axios支持多种请求方式

• 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(config)这种请求方式

3、使用axios进行网络请求

1）基本使用

简单获取一些数据

首先我们提供了一个接口，通过这个接口可以访问到一些数据
接口为：http://123.207.32.32:8000/home/multidata

在浏览器中输入接口网址：

通过浏览器，我们发现，这个接口是可以正常获取数据的，so，通过使用axios来获取这个接口数据

准备工作：使用CL2创建vue项目

vue init webpack '项目名称'

根据项目需要进行相关的项目配置。

安装 axios：npm install axios --save

使用axios获取接口数据：
main.js中的代码：

import Vue from 'vue'
import App from './App'
import axios from "axios";

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
   
  el: '#app',
  render: h => h(App)
})

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

显示效果：

指定发送请求的方式：method: 'post'

import Vue from 'vue'
import App from './App'
import axios from "axios";

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
   
  el: '#app',
  render: h => h(App)
})

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

显示效果：

返回的结果与上一个显示效果一样。注意默认方式就是发送get请求。

get请求的参数拼接

给定一个带有参数的接口：http://152.136.185.210:7878/api/hy66/home/data?type=sell&page=3

在浏览器中查看数据：

方式一：直接通过输入url来获取对应的数据

import Vue from 'vue'
import App from './App'
import axios from "axios";

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
   
  el: '#app',
  render: h => h(App)
})

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

axios({
   
  url: 'http://152.136.185.210:7878/api/hy66/home/data?type=sell&page=3'
}).then(res => console.log(res));

显示效果：

方式二：通过传入的参数进行拼接

import Vue from 'vue'
import App from './App'
import axios from "axios";

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
   
  el: '#app',
  render: h => h(App)
})

axios({
   
  url: 'http://152.136.185.210:7878/api/hy66/home/data',
  params: {
   
    type: 'pop',
    page: 1
  }
}).then(res => console.log(res));

显示效果：

2）axios发送并发请求

发送并发请求出现的场景：在某些情况下，我们希望一次性收到多个请求，并对这些请求做一些处理。

可以使用 axios.all ，放入多个请求的数组axios.all([])

import Vue from 'vue'
import