搞懂Promise

简介: 搞懂Promise


今天看了好几位大牛的文章,整理和记录下对promise的认识。 方便大家一起学习~

What? (promise的大概是个什么东西,我们从几个角度来认识下)
Promise是异步编程的一种解决方案,它有三种状态,分别是pending-进行中、resolved-已完成、rejected-已失败当Promise的状态又pending转变为resolved或rejected时,(承诺执行)会执行相应的方法,并且状态一旦改变,就无法再次改变状态,这也是它名字promise-承诺的由来.

JS就是操作对象上的属性和方法,对于一个对象,想要了解,我们可以直接从其身上的属性和方法入手;直接使用console.dir(对象)打印出来

从上面打印出来的属性和方法,可以看到Promise是一个构造函数,有属于自己私有的all,reject,resolve,rece等方法,也有原型上面的,属于实例对象调用的方法then,catch

在JavaScript的世界中,所有代码都是单线程执行的。由于这个“缺陷”,导致JavaScript的所有网络操作,浏览器事件,都必须是异步执行。异步执行可以用回调函数实现:

function callback() {
   
    console.log('执行完毕');
}
console.log('before setTimeout()');
setTimeout(callback, 1000); // 1秒钟后调用callback函数,模拟网络请求
console.log('after setTimeout()');

How to use ?  (一个简单Promise例子 )
function test(resolve, reject) {
   
    var timeOut = Math.random() * 2;
    console.log('set timeout to: ' + timeOut + ' seconds.');
    setTimeout(function () {
   
        if (timeOut < 1) {
   
            console.log('call resolve()...');
            resolve('200 OK');
        }
        else {
   
            console.log('call reject()...');
            reject('timeout in ' + timeOut + ' seconds.');
        }
    }, timeOut * 1000);
}

var p1 = new Promise(test);
var p2 = p1.then(function (result) {
   
    console.log('成功:' + result);
});
var p3 = p2.catch(function (reason) {
   
    console.log('失败:' + reason);
});

变量p1是一个Promise对象,它负责执行test函数。由于test函数在内部是异步执行的,当test函数执行成功时,我们告诉Promise对象:

// 如果成功,执行这个函数:

p1.then(function (result) {
   
    console.log('成功:' + result);
});

当test函数执行失败时,我们告诉Promise对象:

p2.catch(function (reason) {
   
    console.log('失败:' + reason);
});

Promise对象可以串联起来,所以上述代码可以简化为:

new Promise(test).then(function (result) {
   
    console.log('成功:' + result);
}).catch(function (reason) {
   
    console.log('失败:' + reason);
});

可见Promise最大的好处是在异步执行的流程中,把执行代码和处理结果的代码清晰地分离了。

链式操作 ----- promise 的 all 与 race 用法和区别

Promise对于多层回调,可以简化其写法,使得更加的语义化;但是Promise的精髓在于其链式操作,传递状态,维护状态的方式使得回调函数能够及时的调用

all方法的使用

Promise
       .all([runAsync1(),runAsync2(),runAsync3()])
       .then(function(results){
   
          console.log(results);
        });

Promise.all来执行前面的三个异步的函数,all()接收一个数组参数,里面的执行最终都返回Promise对象,只有等三个异步操作都执行完成后才会进入到then里面,all会把所有的异步操作的结果放在一个数组中传给then,就是上面的results

race的用法

Promise
      .race([runAsync1(),runAsync2(),runAsync3()])
       .then(function(results){
   
         console.log(results);
        });

这三个 异步操作同样是并行执行的,但是等到1秒后,runAsync1已经执行完毕,于是then接受到了执行完毕的回调,输出回调结果;与此同时,runAsyn2和runAsyn3也继续执行,输出了执行的结果,但是不能回调then方法。

相关文章
|
3月前
|
前端开发 JavaScript API
【面试题】说说 Promise是什么?如何使用
【面试题】说说 Promise是什么?如何使用
|
8月前
|
前端开发
一篇搞懂promise
一篇搞懂promise
83 0
|
4月前
|
前端开发 JavaScript
手写promise
手写promise
26 1
|
8月前
|
前端开发 JavaScript API
谈谈你对promise的理解?
Promise是ES6异步编程的一种解决方案(目前最先进的解决方案是async和await的搭配(ES8),但是它们是基于promise的),从语法上讲,Promise是一个对象或者说是构造函数,用来封装异步操作并可以获取其成功或失败的结果。
|
8月前
|
前端开发 JavaScript
【面试题】说一下promise的理解
promise详解,方法的应用场景
【面试题】说一下promise的理解
|
8月前
|
前端开发
前端学习笔记202306学习笔记第四十二天-promise-promise的静态方法1
前端学习笔记202306学习笔记第四十二天-promise-promise的静态方法1
21 0
前端学习笔记202306学习笔记第四十二天-promise-promise的静态方法1
|
8月前
|
前端开发
前端学习笔记202306学习笔记第四十二天-promise-promise的静态方法2
前端学习笔记202306学习笔记第四十二天-promise-promise的静态方法2
37 0
|
8月前
|
前端开发 JavaScript API
promise看这一篇就够了
promise看这一篇就够了
98 2
|
9月前
|
前端开发
Promise是什么?怎么用?
Promise 是一种异步编程的解决方案。它可以使异步操作更加清晰、简单、优雅,避免了回调地狱的问题。Promise 对象表示一个异步操作的最终完成或失败,并且它的最终状态(完成或失败)和返回值(或错误)不依赖于调用它的代码。
|
9月前
|
前端开发
手写Promise
手写Promise