@@ -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
212210var 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