Promise: 承诺,许诺
作用: 解决异步回调问题
关于 Promise 具体描述:
Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理
和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供
了 Promise 对象。
所谓 Promise,简单说就是一个容器
,里面保存着某个未来才会结束的事件(通常是
一个异步操作)的结果。从语法上说,Promise 是一个对象
,从它可以获取异步操作的消
息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。Promise 实例生成以后,可以用 then 方法
分别指定resolve
状态和 rejecte
状态的回调函数。resolve 函数的作用是,将 Promise 对象的状态从“未完成”变为“成功”
(即从pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;reject 函数的作用是,将 Promise 对象的状态从“未完成”变为“失败”
(即从pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。then 方法可以接受两个回调函数作为参数。第一个回调函数是 Promise 对象的状态变为 resolved
时调用,第二个回调函数是 Promise 对象的状态变为 rejected
时调用。其中,第二个函数是可选的,不一定要提供
。这两个函数都接受 Promise 对象传出的值作为参数。
1.基本语法
let promise = new Promise(function(resolve, reject){ if ( /* 异步操作成功 */ ){
resolve(value); //成功操作
} else {
reject(error); //失败操作
}
});
promise.then(function(value) {
// success
}, function(error) {
// failure
});
2.语法演示
let a=10;
//01 记录状态
let promise = new Promise(function(resolve,reject){
if(a == 10){
resolve('成功')
}else{
reject('失败')
}
});
//02 根据状态输出
promise.then(resolve=>{
console.log("成功")
},reject=>{
console.log("失败")
})
箭头函数的形式为
promise.then(res=>{
//成功调用
}, err=>{
//失败调用
})
3.resolve单向输出
var p = new Promise(function(resolve,reject){
var timer = setTimeout(function(){
resolve('数据加载成功!')
},3000);
})
p.then(res=>{
console.log(res)
})
4.reject单向输出
var p = new Promise(function (resolve, reject) {
var timer = setTimeout(function () {
reject('数据加载失败!')
}, 3000);
})
p.then(res => {
console.log(res)
}, rej => {
console.log(rej)
})
5.catch错误捕捉:
promise.then(res=>{
//成功调用 }).catch(err=>{
//失败调用
})
let a= 1;
let promise = new Promise(function(resolve,reject){
if(a ==10){
resolve('成功')
}else{
reject('失败')
}
})
promise.then(res => {
console.log(res)
}, rej => {
console.log(rej)
}).catch(err=>{
console.log(err)
})
var p = new Promise(function (resolve, reject) {
var flag = false;
if (flag) {
resolve('这是数据1')
} else {
reject('这是数据2')
}
})
p.then(res => {
console.log(' 这是成功操作')
}).catch(rej => {
console.log('这是成功操作')
})
6.promise解决复杂问题
ES5 方法
setTimeout(function () {
console.log('我')
setTimeout(function () {
console.log('爱')
setTimeout(function () {
console.log('鸡')
setTimeout(function () {
console.log('腿')
}, 1000)
}, 1000)
}, 1000)
}, 1000)
ES6 方法
promise.then()的链式操作的好处:防止数据阻塞
function getStr1(){
return new Promise(function(resolve,reject){
setTimeout(function(){
resolve('我')
},1000)
})
}
function getStr2(){
return new Promise(function(resolve,reject){
setTimeout(function(){
resolve('爱')
},1000)
})
}
function getStr3(){
return new Promise(function(resolve,reject){
setTimeout(function(){
resolve('鸡')
},1000)
})
}
function getStr4(){
return new Promise(function(resolve,reject){
setTimeout(function(){
resolve('腿')
},1000)
})
}
getStr1().then(res=>{//promise.then()的链式操作的好处:防止数据阻塞
console.log(res)
return getStr2()
}).then(res=>{
console.log(res)
return getStr3()
}).then(res=>{
console.log(res)
return getStr4()
}).then(res=>{
console.log(res)
})
7.resolve only
resolve是Promise对象的方法,获取成功返回的数据并标记
let p1 = Promise.resolve('数据获取成功');
p1.then(res=>{
console.log(res)
})
8.reject only
let p1 = Promise.reject('数据未加载成功');
p1.then(res=>{
console.log(res)
}).catch(rej=>{
console.log(rej)
})
Promise.resolve(‘aa’) : 将现有的东西,转成一个 promise 对象, resolve 状态,成功状态
等价于:
new Promise(resolve =>{
resolve(‘aaa’)
});
Promise.reject(‘aaa’): 将现有的东西,转成一个 promise 对象,reject 状态,失败状态
等价于:
new Promise((resolve, reject) =>{
reject(‘aaa’)
});
- Promise.all
Promise.all([p1, p2, p3]): 把 promise 打包,扔到一个数组里面,打包完还是一个promise 对象
必须确保,所有的 promise 对象,都是 resolve 状态,都是成功状态
Promise.race([p1, p2, p3]): 只要有一个成功,就返回
let p1 = Promise.resolve('aaa')
let p2 = Promise.resolve('bbb')
let p3 = Promise.resolve('ccc')
Promise.all([p1,p2,p3]).then(res=>{//p1,p2,p3状态必须是resolve==>成功
//console.log(...res);
let[res1,res2,res3]=res;
console.log(...res)
})
10.模拟用户登录
let status = true;
let userLogin = (resolve,reject)=>{
setTimeout(()=>{
if(status == true){
resolve({data:"登录成功",home:"",age:""})
}else{
reject('失败了')
}
},2000)
};
let getUserInfo = (resolve,reject)=>{
setTimeout(()=>{
if(status == true){
resolve({data:"获取用户信息成功",home:"河南",age:"18"})
}else{
reject('失败了')
}
},1000)
}
new Promise(userLogin).then(res=>{
console.log('用户登录成功');
return new Promise(getUserInfo)
}).then(res=>{
console.log('获取用户信息成功');
console.log(res)
})