Promise

js
es2015, js, source
文章目录
  1. 1. Promise
    1. 1.1. 前言
    2. 1.2. Promise是什么？
    3. 1.3. Promise的原理

Promise

Promise基本认识

ECMAScript6(ES2015)的发布，Promise 被列为正式规范，为 ES6 中最重要的特性之一。

前言

ES6中原生已经对它加已支持https://caniuse.com/中搜索一下Promise,主流的浏览器都已经支持。但是低版本的浏览器我们可以使用es6-promise这个polyfill库来加以兼容。

Promise是什么？

ECMAScript6(ES2015)的发布，Promise 被列为正式规范，为 ES6 中最重要的特性之一。

Promise是异步编程的一种解决方案，它有三种状态，分别是pending-进行中、resolved-已完成、rejected-已失败

当Promise的状态由pending转变为resolved或rejected时，会执行相应的方法，并且状态一旦改变，就无法再次改变状态，这也是它名字promise-承诺的由来

Promise的出现，原本是为了解决回调地狱的问题，讲Promise时，都会以Ajax请求为例：

ajax原写法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function ajax(method,url,successFun,failFun){
    var xml = new XMLHttpRequest();
    xml.open(method,url);
    xml.send();
    xml.onload = function(){
        if(this.status == 200){
            successFun(this.response);
        }else{
            failFun(this.statusText);
        }
    }
    
    xml.error = function(){
        failFun(this.statusText)
    }
}

Promise写法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function ajax(method,url){
    var promise = new Promise(function(resolve,reject){
        var xml = new XMLHttpRequest();
        xml.open(method,url);
        xml.send();
        xml.onload= function(){
            if(this.status == 200){
                resolve(this.response);
            }else{
                reject(this.statusText);
            }
        }
        xml.error = function(){
            reject(this.statusText);
        }
    })
    
    return promise
}
//调用：
ajax("get","https://.....").then(successFun,failFun)
//或
ajax("get","https://.....").then(successFun).catch(failFun)
  • 我们把异步中使用回调函数的场景改为了.then()、.catch()等函数链式调用的方式。
    基于promise我们可以把复杂的异步回调处理方式进行模块化

Promise的原理

promise它内部有三个状态，分别是pending，fulfilled和ejected。

  1. 状态 Promise的初始状态是 Pending ，状态只能被转换为（Resolved）Fulfilled或Rejected，状态的转换不可逆。
  2. then必须有 then方法，接收两个可选函数参数onFulfilled、onRejected，then方法必须返回一个新的Promise对象，为了保证then中回调的执行顺序，回调必须使用异步执行。
  3. 兼容 不同的 Promise的实现必须可以互相调用

除了串行执行若干异步任务外，Promise还可以并行执行异步任务:

从两个不同的URL分别获得用户的个人信息和好友列表，这两个任务是可以并行执行的，用Promise.all()实现如下：

1
2
3
var pro1 = new Promise(function(resolve,reject){
   setTimeout(function(){},100) 
});
分享到