由于网页内容为繁体中文，因此在术语描述和言语技巧上与我们存在差异。 作者在保证不改变原意的基础上进行了调整，并在此基础上进行了错误更正。 如果您发现任何问题，欢迎您指正。
开幕
自从Fetch API出来之后，我们就可以使用漂亮的语法来发送HTTP或者获取后台接口数据了。 本文将分享我自己常用的Fetch方法（GET、POST、或.all...等），并且随着浏览器的普遍支持，不需要使用或AJAX，我们的代码看起来更简洁干净~
01
获取基本用法
fetch()方法中包含了需要抓取的URL以及对应的属性设置（例如,,,mode,body等，最基本的写属性可以不用填写），之后会发送出去执行，收到响应则发送 返回内容和返回值，使用then将返回值向下传递。
seline;box-sizing: border-box;overflow-wrap: normal;background: rgb(240, 240, 240);border-radius: 3px;overflow-x: auto;">fetch('网址')
.then(function(response) {
// 处理 response
}).catch(function(err) {
// 错误处理
});
例如，很多气象数据都可以通过天气数据开放平台（如阿里云的API开放平台）来获取。 以下示例获取北京当前的温度。 因为结果是json格式返回的，所以拿到数据后，通过json( )方法处理数据，然后传递给下一层，显示“北京当天的气温”。
seline;box-sizing: border-box;overflow-wrap: normal;background: rgb(240, 240, 240);border-radius: 3px;overflow-x: auto;">fetch('天气数据开放平台网址')
.then(res => {
return res.json();
}).then(result => {
let city = result.cwbopendata.location[14].parameter[0].parameterValue;
let temp = result.cwbopendata.location[14].weatherElement[3].elementValue.value;
console.log(`${city}的当前气温 ${temp} 摄氏度`); // 得到 北京市的气温 29.30摄氏度
});
02
获取属性
下面列出了 Fetch 常用的属性。 （更多属性请参考fetch）
属性设定值
网址
第一个参数为必填，表示要获取的对象的URL
GET、POST、PUT、HEAD（默认 GET）
设置相关内容（默认 {} ）
模式
cors、no-cors、same-、（默认 cors）
否，或某个 URL（默认）
省略，相同-，（默认省略）
，错误，（默认）
缓存
、无存储、无缓存、强制缓存（默认）
03
获取属性
以下是 Fetch 常用的属性列表。 （更多属性和方法请参考 fetch ）
属性设定值
包含相关内容
好的
成功则返回true，失败则返回false
状态码，200表示成功
状态信息，成功就ok
类型
类型，如 basic、cors...等。
网址
网址
04
获取方法
下面列出了Fetch常用的方法。 （更多属性和方法请参考fetch）。
属性设定值
json()
返回，是一个JSON对象
文本（）
返回，是文本
斑点（）
返回，是一个blob（非结构化对象，例如文本或二进制信息）
()
返回，是（多少字节）
()
返回，yes（表单数据对应的Key或Value）
克隆（）
创建对象的克隆。
错误（）
返回错误内容
05
获取 Fetch 的使用情况
Get是Fetch最简单的方法。 要使用Get，必须将fetch的第二个参数设置为get。 如果遇到跨域问题，可以使用mode等其他属性进行详细设置（但是对于非跨域，下面的例子中我做了一个简单的后端请求，通过fetch传递了name和age的参数，您将看到后端响应的一串文本。
seline;box-sizing: border-box;overflow-wrap: normal;background: rgb(240, 240, 240);border-radius: 3px;overflow-x: auto;">const name = 'oxxo';
const age = 18;
const uri = `https://网址/exec?name=${name}&age=${age}`;
fetch(uri, {method:'GET'})
.then(res => {
return res.text();
// 使用 text() 可以得到纯文字 String
}).then(result => {
console.log(result);
// 得到「你的名字是：oxxo，年紀：18 岁。」
});
06
Fetch 的后期使用
POST方法可以与body属性一起使用来设置传输参数。 例如，我的接口地址可以接收由姓名和年龄组成的JSON请求。 当 URL 收到请求时，它将使用 JSON 对象进行响应。 需要注意的是，如果是“中文”的传输可能会出现乱码。 这时候就可以用来转码了，必须通过JSON转成方法。
seline;box-sizing: border-box;overflow-wrap: normal;background: rgb(240, 240, 240);border-radius: 3px;overflow-x: auto;">const uri = '网址';
fetch(uri, {
method:'POST',
body:encodeURI(JSON.stringify({
name:'oxxo',
age:18
})),
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
}
})
.then(res => {
return res.json();
// 使用 json() 可以得到 json 对象
}).then(result => {
console.log(result);
// 得到 {name: "oxxo", age: 18, text: "你的名字是 oxxo，年纪18岁～"}
});
07
使用 async、await、.all 获取
在过去或者AJAX的鼎盛时期，如果要保证每个GET或者POST请求都按照指定的顺序执行，往往会使用一系列的辅助，但是当越来越多的时候，代码就变得越来越多管理起来比较困难，但是fetch返回1，我们也可以直接使用await或者.all来轻松掌握同步与异步的转换。
下面的例子是一个异步的例子，因为没有同步处理，所以执行后会先出现hello的文本，然后是通过fetch得到的结果。
seline;box-sizing: border-box;overflow-wrap: normal;background: rgb(240, 240, 240);border-radius: 3px;overflow-x: auto;">const postURL = (name,age) => {
const uri = 'https://网址;
return fetch(uri, {
method:'POST',
body:encodeURI(JSON.stringify({
name:name,
age:age
})),
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
}
})
.then(res => {
return res.json();
}).then(result =>{
console.log(result);
});
};
postURL('oxxo',18);
console.log('hello!!!');
postURL('tom',18);
因为fetch的特点，所以可以改为async和await，执行完后就可以按照我们想要的顺序执行。
seline;box-sizing: border-box;overflow-wrap: normal;background: rgb(240, 240, 240);border-radius: 3px;overflow-x: auto;">await Promise.all([postURL('oxxo',18), postURL('tom',18)]);
console.log('hello!!!');
08
兼容性
说了这么多，大家一定关心这个API的兼容性。 大多数现代浏览器仍然支持它，因此您可以放心使用它，如下图所示：
Fetch API 的魔力简化了很多原本复杂的用法，也让项目代码更加干净、易读、易维护。 更重要的是ES6原生支持，不需要安装任何依赖包，可以直接在项目中使用。
