Skip to content

Commit e993d17

Browse files
committed
docs(async): edit promise
1 parent 7146184 commit e993d17

File tree

1 file changed

+6
-79
lines changed

1 file changed

+6
-79
lines changed

docs/async/promise.md

Lines changed: 6 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -202,11 +202,9 @@ f1().then(f2)
202202
.then(f3);
203203
```
204204

205-
## Promise 的实例
205+
## 实例:图片加载
206206

207-
### 加载图片
208-
209-
我们可以把图片的加载写成一个`Promise`对象。
207+
下面是使用 Promise 完成图片的加载。
210208

211209
```javascript
212210
var preloadImage = function (path) {
@@ -219,83 +217,12 @@ var preloadImage = function (path) {
219217
};
220218
```
221219

222-
### Ajax 操作
223-
224-
Ajax 操作是典型的异步操作,传统上往往写成下面这样。
225-
226-
```javascript
227-
function search(term, onload, onerror) {
228-
var xhr, results, url;
229-
url = 'http://example.com/search?q=' + term;
230-
231-
xhr = new XMLHttpRequest();
232-
xhr.open('GET', url, true);
233-
234-
xhr.onload = function (e) {
235-
if (this.status === 200) {
236-
results = JSON.parse(this.responseText);
237-
onload(results);
238-
}
239-
};
240-
xhr.onerror = function (e) {
241-
onerror(e);
242-
};
243-
244-
xhr.send();
245-
}
246-
247-
search('Hello World', console.log, console.error);
248-
```
249-
250-
如果使用 Promise 对象,就可以写成下面这样。
220+
上面的`preloadImage`函数用法如下。
251221

252222
```javascript
253-
function search(term) {
254-
var url = 'http://example.com/search?q=' + term;
255-
var xhr = new XMLHttpRequest();
256-
var result;
257-
258-
var p = new Promise(function (resolve, reject) {
259-
xhr.open('GET', url, true);
260-
xhr.onload = function (e) {
261-
if (this.status === 200) {
262-
result = JSON.parse(this.responseText);
263-
resolve(result);
264-
}
265-
};
266-
xhr.onerror = function (e) {
267-
reject(e);
268-
};
269-
xhr.send();
270-
});
271-
272-
return p;
273-
}
274-
275-
search('Hello World').then(console.log, console.error);
276-
```
277-
278-
加载图片的例子,也可以用 Ajax 操作完成。
279-
280-
```javascript
281-
function imgLoad(url) {
282-
return new Promise(function (resolve, reject) {
283-
var request = new XMLHttpRequest();
284-
request.open('GET', url);
285-
request.responseType = 'blob';
286-
request.onload = function () {
287-
if (request.status === 200) {
288-
resolve(request.response);
289-
} else {
290-
reject(new Error('图片加载失败:' + request.statusText));
291-
}
292-
};
293-
request.onerror = function () {
294-
reject(new Error('发生网络错误'));
295-
};
296-
request.send();
297-
});
298-
}
223+
preloadImage('https://example.com/my.jpg')
224+
.then(function (e) { document.body.append(e.target) })
225+
.then(function () { console.log('加载成功') })
299226
```
300227

301228
## 小结

0 commit comments

Comments
 (0)