这是我参与更文挑战的第4天，活动详情查看： 更文挑战
初识fetch
现在获取后台数据的时候，既有jq封装的ajax，也有axios等等，也有原生的XMLHttpRequest，但是今天没有介绍这些，而是介绍另外一个api，fetch。
fetch，说白了，就是XMLHttpRequest的一种替代方案。如果有人问你，除了XMLHttpRequest获取后台数据之外，还有没有其他的替代原生api？
这是你就可以回答，还可以使用一种解决方案--fetch。
fetch用法
fetch可以在现代浏览器中使用，已经挂载到BOM上面，可以直接在谷歌控制台使用，fetch返回的是一个Promise 查看fetch的支持情况：fetch的支持情况
当然，如果不支持fetch也没有问题，可以使用第三方的ployfill来实现：fetch-ployfill
简单使用
// 通过fetch获取
//
fetch('https://www.xxx.com/search') // 返回一个Promise对象
.then((res) => {
console.log(res.text()) // res.text() 是promise对象
}).then((res) => {
console.log(res)
})
fetch API
fetch(url[, option])
- url:
必填，定义要获取的资源。这可能是：
一个 url 字符串，包含要获取资源的 URL
一个 Request 对象
- option 可选 一个配置项对象，包括所有对请求的设置。
可选的参数有：
method: 请求使用的方法，如 GET、POST等。
headers: 请求的头信息。 形式为 Headers 的对象。
body: 请求的 body 信息：可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象，字符串对象，字符串。注意 GET 或 HEAD 方法的请求不通过body信息传参，通过url带上参数
mode: 请求的模式，如 cors 非简单请求、 no-cors 同源请求或者简单请求 或者 same-origin 同源请求。
credentials: 是否在请求中带上cookie，默认是same-origin，可选值有omit（不会发送cookie）、same-origin（同域才会带，这个是默认值） 或者 include（都会带上）。
cache: 请求的缓存模式: default （默认，按照浏览器缓存）、 no-store 、 reload 、 no-cache 、 force-cache 或者 only-if-cached 。
redirect: 可用的 redirect 模式如下
-
follow (自动重定向)
-
error (如果产生重定向将自动终止并且抛出一个错误)
-
或者 manual (手动处理重定向).
在Chrome中，Chrome 47之前的默认值是 follow，从 Chrome 47开始是manual。
referrerPolicy：请求来源策略
no-referrer不带上来源，same-origin同源时带上来源。no-referrer-when-downgrade如果降级（https -> http）不带上，其它都带上unsafe-url总是带上来源- ...
referrer： 具体的来源url，只在referrerPolicy是no-referrer-when-downgrade或者unsafe-url时才有效。
其它参数待补充
例子
get请求直接携带在url中类似于
// 通过fetch获取
fetch('https://www.xxx.com/search/?a=1&b=2', { // 在URL中写上传递的参数
method: 'GET'
})
.then((res)=>{
return res.text()
})
.then((res)=>{
console.log(res)
})
post请求则在option.body中设置， 类似于
// 第一种
var url = 'https://xxxx.com/profile';
var data = {username: 'xxx'};
fetch(url, {
method: 'POST', // or 'PUT'
body: JSON.stringify(data), // data can be `string` or {object}!
headers: new Headers({
'Content-Type': 'application/json'
})
}).then(res => res.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response))
// 第二种
fetch('https://www.xxx.com/search', {
method: 'POST',
body: new URLSearchParams([["foo", 1],["bar", 2]]).toString() // 这里是请求对象
})
.then((res)=>{
return res.text()
})
.then((res)=>{
console.log(res)
})
总结
fetch本身返回是promise，结合async，await使用起来还是挺舒服的，大家可以体验一下，童叟无欺。
