首页 > 其他 > 详细

Promise对象学习笔记

时间:2020-02-05 12:21:54      阅读:60      评论:0      收藏:0      [点我收藏+]

参考:阮一峰《ES6标准入门》(第3版)第14章 Promise对象

 

Promise的含义

Promise是异步编程的一种解决方案

一大波文字省略……

 

基本用法

ES6规定,Promise对象是一个构造函数,用来生成Promise实例

一个简单的Promise实例:

 1 // 创建一个Promise实例
 2 var promise = new Promise(function(resolve, reject) {
 3     // ... some code
 4     if (/*异步操作成功*/) {
 5         resolve(‘some value‘)
 6     } else {
 7         reject(‘some error‘)
 8     }
 9 })
10 
11 // 调用promise
12 promise.then(function(value) {
13     // success
14 }, function (error) {
15     // failure
16 })

 

另一个Promise对象的简单例子

 1 function timeout (ms) {
 2     return new Promise((resolve, reject) => {
 3         setTimeout(resolve, ms, ‘done‘)
 4     })
 5 }
 6 
 7 timeout(3000).then((value) => {
 8     console.log(value)
 9 })
10 
11 // 输出结果:
12 // done

上面代码中,timeout方法返回一个Promise实例,表示一段时间以后才会发生的结果。过了指定的时间(ms参数)以后,Promise实例的状态变为Resolved,就会触发then方法绑定的回调函数。

 

 

下面这个例子可以看到promise的执行顺序

 1 let promise = new Promise(function(resolve, reject) {
 2     console.log(‘Promise‘);
 3     resolve();
 4 })
 5 
 6 promise.then(function() {
 7     console.log(‘Resolved.‘);
 8 })
 9 
10 console.log(‘Hi!‘);
11 
12 // 执行顺序
13 // Promise
14 // Hi!
15 // Resolved.

上面的代码中,Promise新建后会立即执行,所以首先输出的是Promise, 然后,then方法指定的回调函数将在当前脚本所有同步任务执行完成后才会执行,所以Resolved最后输出。

 

 

一个异步加载图片的例子

为了直观看到效果,新建一个html文件index.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     <script>
11         function loadImageAsync (url) {
12             return new Promise(function(resolve, reject) {
13                 var image = new Image()
14                 image.src = url;
15 
16                 image.onload = function () {
17                     resolve(image);
18                 }
19 
20                 image.onerror = function () {
21                     reject(new Error(Could not load image at + url))
22                 }
23             })
24         }
25 
26         loadImageAsync(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580879109326&di=c7df42cf94ebc4b5497f5982f8473b5a&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F35e6a6c1866c50ade317846362997b03f7ffe5efc732-bTFyZ7_fw658).then(function(image){
27             var body = document.body;
28             body.append(image)
29         }, function(error){
30 
31         })
32     </script>
33 </body>
34 </html>

测试图片url网上随便找的,浏览器预览index.html效果如下:

技术分享图片

 

 

 

一个用Promise对象实现AJAX操作的例子

 1 var getJSON = function (url) {
 2     var promise = new Promise(function (resolve, reject) {
 3         var client = new XMLHttpRequest();
 4         client.open("GET", url);
 5         client.onreadystatechange = handler;
 6         client.responseType = "json";
 7         client.setRequestHeader("Accept", "application/json");
 8         client.send();
 9 
10         function handler() {
11             if (this.readyState !== 4) {
12                 return;
13             }
14             if (this.status === 200) {
15                 resolve(this.response);
16             } else {
17                 reject(new Error(this.statusText))
18             }
19         }
20     });
21 
22     return promise;
23 }
24 
25 getJSON("/posts.json").then(function(json){
26     console.log(‘Contents: ‘ + json);
27 }, function (error) {
28     console.error(‘出错了‘, error);
29 })

 

一个更复杂的promise,resolve函数的参数也是一个promise实例

 1 var p1 = new Promise(function(resolve, reject) {
 2     setTimeout(() => {
 3             console.log(‘p1 done‘)
 4             
 5             // reject测试例子
 6             // reject(new Error(‘fail‘)) 
 7 
 8             // resolve测试例子
 9             resolve(‘success‘)
10         }, 3000)
11 })
12 
13 var p2 = new Promise(function(resolve, reject) {
14     setTimeout(() => {
15         console.log(‘p2 done‘);
16         resolve(p1)
17     }
18     , 1000);
19 })
20 
21 p2.then(result => console.log(result)).catch(error => console.log(error))

1s后执行p2里面的console.log(‘p2 done‘)

3s后执行p1里面的console.log(‘p1 done‘)

p1里面各写一个测试例子,当reject一个结果时,p2 catch里面将捕获这个结果,当p1里面resolve一个结果时,p2的then里面将返回这个结果

 

再来一个非常重要的小例子,说明调用resolve或reject并不会终结Promise的参数函数的执行

new Promise((resolve, reject) => {
    resolve(1)
    console.log(2)
}).then(r => {
    console.log(r);
})

// 执行结果:
// 2
// 1

resolved的Promise是在本轮事件循环的末尾执行,总是晚于本轮循环的同步任务。

resolve前加上return,可以阻止后面的代码执行

new Promise((resolve, reject) => {
    return resolve(1);
    // 后面的语句不会执行
    console.log(2);
})

 

 

 

 

 

2020年立个flag——每天写一篇技术博客(或笔记)。

 

Promise对象学习笔记

原文:https://www.cnblogs.com/cathy1024/p/12262931.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!