一.名词约定
1.般来讲,有以下的名词约定:
- promise(首字母小写)对象指的是“Promise实例对象”
- promise首字母大写且单数对象表是“Promise构造函数”
- promise首字母大写且复数对象指代是“Promise规范”
二.什么是Promise?
1.Promie简单来书是个容器,用来保存未来结束事件(通常是一个异步操作)的结果
2.从语法来书Promise是一个对象,它能调用异步操作最终状态(成功或失败)
3.Promise是一个构造函数,它对外有统一的API,自己身上有all,resolve,reject等方法,原型上有then,catch等方法.
三.Promise的两个特点
1.Promise对象的状态不受外界影响
- pending初始状态
- fulfilled成功状态
- rejected失败状态
Promise以上三种状态,只有异步 操作的结果可以决定当前状态,其他任何操作无法改变这一状态
2.Promise
的状态一旦改变,就不会在变,任何时候都可以得到这个结果,要吗由pending变成fulfilled或pending变成rejected
四.使用 new 来创建一个promise对象。
Promise接受一个「函数」作为参数,该函数的两个参数分别是resolve
和reject
。这两个函数就是就是「回调函数」
resolve函数的作用:在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;
reject函数的作用:在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去
const promise = new Promise((resolve, reject) => {
// do something here ...
if (success) {
resolve(value); // fulfilled
} else {
reject(error); // rejected
}
});
五.Promise的API
then()方法
then 方法就是把原来的回调写法分离出来,在异步操作执行完后,用链式调用的方式执行回调函数。
而 Promise 的优势就在于这个链式调用。我们可以在 then 方法中继续写 Promise 对象并返回,然后继续调用 then 来进行回调操作。
可有两个参数,第一个是成功 resolve 调用的方法,第二个是失败 reject 调用的方法
下面做一个买笔写作业上交的演示,它们是层层依赖的关系,下一步的的操作需要使用上一部操作的结果。(这里使用 setTimeout 模拟异步操作),正式开发可以用 ajax 异步
//买笔
function buy(){
console.log("开始买笔");
var p = new Promise(function(resolve,reject){
setTimeout(function(){
console.log("买了笔芯");
resolve("数学作业");
},1000);
});
return p;
}
//写作业
function work(data){
console.log("开始写作业:"+data);
var p = new Promise(function(resolve,reject){
setTimeout(function(){
console.log("写完作业");
resolve("作业本");
},1000);
});
return p;
}
function out(data){
console.log("开始上交:"+data);
var p = new Promise(function(resolve,reject){
setTimeout(function(){
console.log("上交完毕");
resolve("得分:A");
},1000);
});
return p;
}
/* 不建议使用这种方式
buy().then(function(data){
return work(data);
}).then(function(data){
return out(data);
}).then(function(data){
console.log(data);
});*/
//推荐这种简化的写法
buy().then(work).then(out).then(function(data){
console.log(data);
});
正式开发用ajax异步:
var promise = new Promise(function(resolve,reject){
$.ajax({
url:'/api/poisearch.json',
method:'get',
datatype:'json',
success:(res) =>{
resolve(res)
},
error:(err)=>{
reject(err)
}
});
});
promise.then(function(res){
return res.data
}).then(function(data){
return data.result;
}).then(function(result){
console.log(result)
});
//推荐使用箭头函数简写成,极大提升了代码的简洁性和可读性
promise.then(res => res.data).then(data => data.result).then(result => console.log(result));