promise详解以及示例代码

首先讲解什么是promise

博主之前面试一直被问promise是什么，但是始终就是讲不清楚，现在博主决定写一篇文章加深记忆。

promise是一个对象，也就是说与其他JavaScript对象的用法，没有什么两样；其次，它起到代理作用（proxy），充当异步操作与回调函数之间的中介。它使得异步操作具备同步操作的接口，使得程序具备正常的同步运行的流程，回调函数不必再一层层嵌套。

三个状态

异步操作“未完成”（pending）

异步操作“已完成”（resolved，又称fulfilled）

异步操作“失败”（rejected）

状态变化法则

异步操作成功，Promise对象传回一个值，状态变为resolved。

异步操作失败，Promise对象抛出一个错误，状态变为rejected。

then 方法

then方法可以接受两个回调函数，第一个是异步操作成功时（变为resolved状态）时的回调函数，第二个是异步操作失败（变为rejected）时的回调函数（可以省略）。一旦状态改变，就调用相应的回调函数。

resolve reject

resolve***函数*的作用是，将Promise对象的状态从“未完成”变为“成功”（即从Pending变为Resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；触发then的第一个function

reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从Pending变为Rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。触发then的第二个function

Promise实例生成以后，可以用then方法分别指定Resolved状态和Reject状态的回调函数。

promise应用实例－－ajax请求

传统方式下代码如下：

function search(term,onload,onerror){
var url,xhr,results;
url = 'https://www.baidu.com/search?q=' + term;

xhr = new XMLHttpRequest();
xhr.open('GET',url,true);

xhr.onload = function(e){
if(this.status === 200){
results = JSON.parse(this.responseText);
onload(results);
}
};
xhr.onerror = function(e){
onerror(e);
}
xhr.send();
}
search("Hello",console.log,console.error);

运用promise来进行异步和回调的代理代码如下：

function search(term,onload,onerror){
var url,xhr,results;
url = 'https://www.baidu.com/search?q=' + term;

xhr = new XMLHttpRequest();

var p = new Promise(function(resolve,reject){
xhr.open('GET',url,true);
xhr.onload = function(e){
if(this.status === 200){
results = JSON.parse(this.responseText);
resolve(results);
}
};
xhr.onerror = function(e){
reject(e);
};
xhr.send();
});

return p;
}

search("hello").then(console.log,console.error);

promise优点

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

2）有若干个异步任务，需要先做任务1，如果成功后再做任务2，任何任务失败则不再继续并执行错误处理函数