网络请求工具（ajax//axios//fetch）
# 网络请求工具
- 原生 ajax 的写法。自己实现 xmlhttprequest
- jquery \$.ajax
- vue-resource vue 1.x 的时候提供的 网络请求工具。尤雨溪在 vue 2.x 中推荐我们使用 axios
- axios
- fetch
## axios
> 专注于网络请求的工具，不光可以用在浏览器端，还可以用在 node 中。
> promise 封装
> 请求拦截和响应拦截
1. 安装
```shell
npm install --save axios
```
2. 简单使用
2.0 axios(config)
2.1 axios.get(url, [config])
2.2 axios.post(url, [data], [config])
#### axios.get 如何传递请求参数
http://localhost:3000/api/getBrand
1. 直接将参数拼接在 url 地址后面。
```js
axios.get('http://localhost:3000/api/getBrand?pageNum=1&pageSize=10')
```
2. 使用 params 这个选项
```js
axios.get('http://localhost:3000/api/getBrand', {
params: {
pageNum: 1,
pageSize: 10
}
})
#### axios.post 如何传递请求参数
http://localhost:3000/api/getBrand
1. 使用 第二个 data 参数
```js
axios.post('http://localhost:3000/api/getBrand', {
pageNum: 1,
pageSize: 10
})
```
2. 使用 data 选项
```js
axios.post('http://localhost:3000/api/getBrand', null, {
data: {
pageNum: 1,
pageSize: 10
}
})
```
```
#### 创建实例来实现对 axios 的封装
```js
var instance = axios.create({ //返回axios的实例对象
// 返回后带了这些 默认选项的配置
baseURL: 'https://some-domain.com/api/', //基础路径，后面请求不需要加这路径
（// baseURL: 'https://m.maizuo.com', // 在发送请求时，如果没有明确指定请求的域名地址信息，那么会主动将请求地址拼接上这个 baseURL）
timeout: 1000,
headers: { 'X-Custom-Header': 'foobar' } //请求头
})
如：
// 1. 引入 axios node 中的 commonJS 规范方式
const axios = require('axios')
const http = axios.create({
// 传递一些默认的选项
baseURL: 'https://m.maizuo.com', // 在发送请求时，如果没有明确指定请求的域名地址信息，那么会主动将请求地址拼接上这个 baseURL
headers: {
'X-Client-Info':
'{"a":"3000","ch":"1002","v":"5.0.4","e":"156584910960129542198"}',
'X-Host': 'mall.cfg.common-banner'
}
})
// 一些拦截的设置
// 响应的拦截，当请求响应回到 .then 回调之前，会执行这段代码的回调函数
http.interceptors.response.use(function(response) {
console.log('1')
return response.data
})
http.get('/gateway?type=2&cityId=440300&k=1367332').then(response => {
console.log(2)
console.log(response)
})
```
借助axios的拦截器实现Vue.js中登陆状态校验的思路
#### axios 请求回来的数据，默认需要在 reponse.data 中获取到(体现了封装的必要)
不同于$.ajax 直接返回res 响应数据
## fetch
html5 新增的一个底层 api,用来替代 xmlHttpRequest。
## ajax 与 jquery 里面的 \$.ajax 还有 axios 还有 fetch 他们之间有啥区别
1. ajax 不是一门技术，而是为了实现某个功能的一系列技术的统称。
2. jquery 中的 \$.ajax 是对原生的 XmlHttpRequest 对象的一个封装而已
3. axios 与 jquery 类似，也是基于原生的 XmlHttpReuqest 的封装。在此基础上，再提供了 Promise Api 与 请求响应拦截之类的功能。还能使用在 node 环境中
4. fetch 与上面 3 个没有可比性。他是一个 html5 中新增的底层 api，用来替代 xmlHttpRequest . 比 xmlHttpRequest 的使用来简便一些，也实现了 Promise Api. 但是兼容性不是那么好。但是可以通过垫片去增加其兼容性。用它来跟 jquery 中的 \$.ajax 或者 axios 来比。
