一、什么是fetch？

Fetch 提供了 Request 和 Response对象（以及与网络请求有关的其他内容）的一般定义。它被定义在 BOM 的 window 对象中，你可以用它来发起对远程资源的请求。fetch() 方法返回的是一个Promise对象，让你能够对请求的返回结果进行检索。他是一个官方库。然而fetch最大的问题是兼容性太差。同时fetch 请求默认是不带 cookie 的，需要设置 fetch(url, {credentials: ‘include’})

二、为什么会有fetch

因为XMLHttpRequest 对象的 API设计并不是很好，输入、输出、状态都在同一个接口管理，容易写出非常混乱的代码。所以FetchAPI就应势而生，提供了一种新规范，用来取代善不完美的 XMLHttpRequest 对象。

Fetch API 主要有两个特点：

1. 接口合理化，AJAX 是将所有不同性质的接口都放在 XHR 对象上，而Fetch是将它们分散在几个不同的对象上，设计更合理；
2. Fetch操作返回 Promise 对象，避免了嵌套的回调函数。

三、使用方法

get请求

返回一个包含响应结果的 promise（一个 Response 对象）。为了获取JSON的内容，我们需要使用 json() 方法（该方法返回一个将响应 body 解析成 JSON 的 promise）。

    fetch("/***")
    	//这里res仅仅是状态码、响应头···的promise对象
        .then(res => res.json())
        //调用json方法得到的res是真正想拿到的数据
        .then(res){
            console.log(res);
        })
        //报错
        .catch(err => {
            console.log(err);
        })

这里也可以用text方法，但是text方法拿到的是一个字符串，不好处理，不建议使用

fetch("/***")
        .then(res => res.text())
        .then(res){
            console.log(res);
        })

post请求

响应数据编码格式为 x - www - form - urlencoded

即：key=value&key=value格式

    fetch("/***", {
        method: "post",
        headers: {//请求头,请求数据格式
            "Content-Type": "application/x-www-form-urlencoded"
        },
        body: "name=key$age=2"//请求体
    }).then(res => res.json())
        .then(res => {
            console.log(res);
        }).catch(err => {
            console.log(err);
        })

响应数据为json格式编码

    fetch("/***", {
        method: "post",
        headers: {//请求头,请求数据格式
            "Content-Type": "application/json"
        },
        body: JSON.stringify({//返回数据格式
            name: "kerwin",
            age: 100
        })
    }).then(res => res.json())
        .then(res => {
            console.log(res);
        }).catch(err => {
            console.log(err);
        })

四、axios是什么

Axios 是一个基于promise网络请求库，作用于node.js和浏览器中，它在服务端它使用原生node.js http模块,而在客户端 (浏览端) 则使用XMLHttpRequests。它是一个第三方库。

特性

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

五、axios用法

get请求

axios.get("/***")
.then(res => {
	console.log(res.data);
})

// 为给定 ID 的 user 创建请求
axios.get('/***?ID=12345')
  .then(res => {
    console.log(res);
  })
  .catch(error => {
    console.log(error);
  });

// 上面的请求也可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(res => {
    console.log(res);
  })
  .catch(error => {
    console.log(error);
  });

post请求

axios会自动根据你传入的是字符串还是对象判断添加相应的请求头。

响应数据编码格式x-www-form-urlencoded

    axios.post("****", "name=wer&age=1")
    .then(res => {
        console.log(res.data);
    })

响应数据格式json格式编码

    axios.post("****", { name: "wer", age=1 })
    .then(res => {
        console.log(res.data);
    })

总结

fetch封装更规范，语义相较于ajax来说更简单。axios虽然是第三方库，但是它相较于fetch体积更小，也没有fetch的问题，所以是目前请求方式的第一选择。
Tip：加油！！！