概念:Promise是为了解决异步操作的容器,是一个构造函数,通过new关键字生成实例,接收一个成功和一个失败的回调函数作为参数。
const promise = new Promise(function(resolve, reject) {
if (/* 异步操作成功 */){
resolve(value);//成功回调函数
} else {
reject(error);//失败回调函数
}
});
特点:
1.新建实例后就会立即执行;
var promise = new Promise(()=>{
console.log(111);//新建后立即打印出111
})
2.promise实例生成后,可通过promise.then方法分别调用resolved状态和rejected状态的回调函数,promise.then返回的是一个新的promise实例,因此可以采用链式写法;
var promise = new Promise(function (resolved,rejected) {
setTimeout(function (res) {//res就是setTimeout的第三个参数
resolved(res);//成功之后把res塞给回调函数
},2000,'888');
})
promise.then(function (res) {
console.log(res)//888
})
3.resolve函数的作用是为了让 promise 对象从未完成变成成功(pending=>resolved),reject函数的作用是为了让 Promise 对象从未完成变成失败(pending=>failed);
4.对象的状态不受外界影响;
5.一旦状态改变,就不会再变。
优点:
1.将异步操作以同步操作的形式表现出来,避免了层层嵌套;
2.提供统一的接口,控制异步操作更加容易。
3.解决回调地狱。
缺点:
1.Promise 一旦新建,就没法停止;
2.如果不设置回调函数,Promise内部抛出的错误和成功之后的参数,无法反应到外部。
使用:
//用法1:执行顺序
let promise = new Promise(function(resolve, reject) {
console.log('1');
resolve();
});
promise.then(function() {
console.log('2');
});
console.log('3');
//打印顺序
1 //定义promise之后立即执行
3 //同步执行
2 //异步执行
//用法2:模拟Ajax请求
ajax({
url:url,
type:'GET',
dataType:'json',
data:{},
success:(res)=>{
console.log(res)
},
error:(res)=>{
console.log(res)
}
});
function ajax(data) {
let promise = new Promise(function (resolve,reject) {
const client = new XMLHttpRequest();
client.open(data.type, data.url);
client.onreadystatechange = function () {
if (this.readyState !== 4) {
return;
}
if(this.status == 200){
resolve(this.response);
}else {
reject(new Error(this.statusText))
}
};
client.responseType = data.dataType;
client.send();
});
promise.then(function (res) {
data.success(res);
},function (res) {
data.error(res);
})
}