Promise

一道小小的面试题  

function sleep(time){
    // 请写出你的代码
}

sleep(2000).then(()=>{
    console.log("后续操作")
})
console.log(2);

目标 是让sleep 的功能与setTimeout一样：就是等2000毫秒之后再执行后续操作。

参考代码如下 ：

function sleep(time){
	return new Promise(function(resolve,reject){
        // 异步操作，根据执行结果，决定是否调用 resolve,reject
        setTimeout(function(){
            resolve()
        }, time)
    })
}

                        Promise的基本使用

 

构造器

// const obj = new Object()
// const arr = new Array()
const p1 = new Promise(function(resolve,reject){
  // 执行异步代码
  // 调用resolve,或者reject
});
console.dir(p1)

要点：

• 构造器必须要给定一个参数，如果不给就是会报错。例如，new Promise() 报错的信息是： Promise resolver undefined is not a function

• 构造器的实参是一个函数，这个函数的特殊之处在于它有两个形参(resolve,reject)，这两个形参也是函数。在格式上，也可以采用箭头函数来改写。例如：var p1 = new Promise((resolve,reject)=>{})

• 在函数体的内部， 一般会执行异步代码，然后根据情况来调用resolve()或者是reject() 。调用resolve或者是reject后会产生什么样的后果，在后面小节介绍。 当然了，再次强调一下resolve和reject只是形参名，可以改写成其它的。 

  三种状态和值 

一个Promise对象的状态可能是如下三种之一：pending,resolved,rejected 。下面分别介绍

初始态pending

pending。它的意思是 "待定的，将发生的"，相当于是一个初始状态。 创建Promise对象时，且没有调用resolve或者是reject方法，相当于是初始状态。这个初始状态会随着你调用resolve，或者是reject函数而切换到另一种状态。

var p = new Promise((ok,err)=>{ console.info('发呆.....' )})
console.dir(p)

这个初始状态就是你对别人说出承诺的那个瞬间，此时，大家都不知道这个承诺是否能兑现。

成功态 resolved

 也有叫fulfilled的

resolved。表示解决了，就是说这个承诺实现了。 要实现从pending到resolved的转变，需要在 创建Promise对象时，在函数体中调用了resolve方法(即第一个参数)。

var p = new Promise((resolve,reject)=>{ resolved();})
console.dir(p)

 注意，上面的resolve和reject仅是形参名而已

失败态  rejected

rejected。拒绝，失败。表示这个承诺没有做到，失败了。要实现从pending到rejected的转换，只需要在创建Promise对象时，调用reject函数。

var p = new Promise((resolve,reject)=>{ reject()} )
console.dir(p)

三种状态小结

1. 状态是可转化。

最初创建promise对象时，默认状态是pending，如果在函数体内部调用了第一个参数对应的函数，则状态变成了resolved；如果调用了第二个参数对应的函数，则状态变成了rejected。

pending -----  resolve() --> resolved;
 pending -----  reject()  --> rejected;

2.状态转换是不可逆的。

一旦从pending ---> resolved（或者是rejected），就不可能再回到pending，也不能由resolved变成rejected。

promise的值

一个promise对象除了状态之外，还有promiseValue。在构造器中，这个值在调用resolve和reject方法时传入。

例如：

var p = new Promise( (resolve,reject) => { resolve(123); } );
//  此时，prommise对象p的状态是 resolved，值是123。
console.dir(p)

var p = new Promise( (resolve,reject) => { reject(123); } );
//  此时，prommise对象p的状态是 rejected，值是123
console.dir(p)

                        promise的兑现

在构造器的函数体中，一旦状态发生了变化，就会进行then，或者是catch中去，同时把promiseValue传入对应的函数。

具体来说：

状态从pending变成resolved，进入then中，调用函数，并传入此时的promiseValue（就是调用resolve时传入的实参）

状态从pending变成rejected，进入catch中，调用函数，并传入此时的promiseValue（就是调用reject时传入的实参）

根据实际情况的需要，也可以不加上finally()。

小小的案例 ：示例 原生ajax 

var xhr = new XMLHttpRequest();
xhr.open('get','http://httpbin.org/ip')
xhr.onload = function() {
	console.log(xhr.responseText)	
}
xhr.onerror = function (){
	console.log('请求接口错误')
}
xhr.send()

改写之后

let ajax = function() {
	return new Promise((resolve,reject)=>{
		var xhr = new XMLHttpRequest();
        xhr.open('get','http://httpbin.org/ip')
        xhr.onload = function() {
			resolve(xhr.responseText)
        }
        xhr.onerror = function (){
			reject('请求接口错误')
        }
        xhr.send()
	})
}
ajax().then(res =>{
    console.log(res)
}).catch(err =>{
    console.log(err)
})