mirror of
https://github.com/wangdoc/webapi-tutorial.git
synced 2025-12-20 00:59:54 +08:00
docs(fetch): edit fetch intro
This commit is contained in:
@@ -6,15 +6,15 @@
|
||||
|
||||
## 基本用法
|
||||
|
||||
`fetch()`的功能与 XMLHttpRequest 基本相同,但有三个主要的差异。
|
||||
`fetch()`的功能与 XMLHttpRequest 基本相同,都是向服务器发出 HTTP 请求,但有三个主要的差异。
|
||||
|
||||
(1)`fetch()`使用 Promise,不使用回调函数,因此大大简化了写法,写起来更简洁。
|
||||
|
||||
(2)`fetch()`采用模块化设计,API 分散在多个对象上(Response 对象、Request 对象、Headers 对象),更合理一些;相比之下,XMLHttpRequest 的 API 设计并不是很好,输入、输出、状态都在同一个接口管理,容易写出非常混乱的代码。
|
||||
|
||||
(3)`fetch()`通过数据流(Stream 对象)处理数据,可以分块读取,有利于提高网站性能表现,减少内存占用,对于请求大文件或者网速慢的场景相当有用。XMLHTTPRequest 对象不支持数据流,所有的数据必须放在缓存里,不支持分块读取,必须等待全部拿到后,再一次性吐出来。
|
||||
(3)`fetch()`通过数据流(Stream 对象)处理数据,可以分块读取,有利于提高网站性能表现,减少内存占用,对于请求大文件或者网速慢的场景相当有用。XMLHttpRequest 对象不支持数据流,所有的数据全部放在缓存里,不支持分块读取,必须等待全部获取后,再一次性读取。
|
||||
|
||||
在用法上,`fetch()`接受一个 URL 字符串作为参数,默认向该网址发出 GET 请求,返回一个 Promise 对象。它的基本用法如下。
|
||||
用法上,`fetch()`接受一个 URL 字符串作为参数,默认向该网址发出 GET 请求,返回一个 Promise 对象。它的基本用法如下。
|
||||
|
||||
```javascript
|
||||
fetch(url)
|
||||
@@ -31,7 +31,7 @@ fetch('https://api.github.com/users/ruanyf')
|
||||
.catch(err => console.log('Request Failed', err));
|
||||
```
|
||||
|
||||
上面示例中,`fetch()`接收到的`response`是一个 [Stream 对象](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API),`response.json()`是一个异步操作,取出所有内容,并将其转为 JSON 对象。
|
||||
上面示例中,`fetch()`接收到的`response`是一个 [Stream 对象](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API),`response.json()`是一个异步操作,用来取出所有内容,并将其转为 JSON 对象。
|
||||
|
||||
Promise 可以使用 await 语法改写,使得语义更清晰。
|
||||
|
||||
@@ -49,7 +49,7 @@ async function getJSON() {
|
||||
|
||||
上面示例中,`await`语句必须放在`try...catch`里面,这样才能捕捉异步操作中可能发生的错误。
|
||||
|
||||
后文都采用`await`的写法,不使用`.then()`的写法。
|
||||
后文都采用`await`的写法,不再使用`.then()`的写法。
|
||||
|
||||
## Response 对象:处理 HTTP 回应
|
||||
|
||||
|
||||
Reference in New Issue
Block a user