promise 异步处理
new Promise(箭头函数)
new Promise(()=>{})
resolve,reject也是函数
1. 基本使用
<script>
new Promise((resolve,reject) => {
setTimeout(()=>{
//成功
// resolve('hello')
//失败
reject('error')
},1000)
}).then((data)=>{
console.log(data);
}).catch(err=>{
console.log(err);
})
</script>
sync同步
async异步
promise三种状态
padding 等待
fulfill 成功
reject 失败
2. 基本使用2
then(函数1,函数2)
new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('hello')
reject('error')
},1000)
}).then(
data=>{console.log(data);},
err=>{console.log('err');}
)
3. 链式调用
return new Promise((resolve,reject)=>{}
new Promise((resolve,reject)=>{
//第一次网络请求的代码
setTimeout(()=>{
resolve()
},1000)
}).then(()=>{
//第一次拿到结果的处理代码
console.log('hello 1');
return new Promise((resolve,reject)=>{
//第二次网络请求的代码
setTimeout(()=>{
resolve()
},1000)
}).then(()=>{
//第二次拿到结果的处理代码
console.log('2');
return new Promise((resolve,reject)=>{
//第三次网络请求的代码
setTimeout(()=>{
resolve()
},1000)
}).then(()=>{
//第三次拿到结果的处理代码
console.log('3');
})
})
})
4. 链式调用简写
new Promise(resolve=>{resolve(res+‘111’)})
new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('aaa')
},1000)
}).then((res)=>{
console.log(res,'第一层的10行处理代码');
return new Promise((resolve)=>{
//对结果进行第一次处理
resolve(res+'111')
}).then(res=>{
console.log(res,'第二层的10行处理代码');
return new Promise((resolve)=>{
resolve(res+'222')
}).then(res=>{
console.log(res,'第三层的10行处理代码');
return new Promise((resolve)=>{
resolve(res+'333')
})
})
})
})
5. 链式调用简简写
return Promise.resolve(res + “111”);
new Promise((resolve, reject) => {
setTimeout(() => {
resolve("aaa");
}, 1000);
})
.then((res) => {
console.log(res, "第一层的10行处理代码");
return Promise.resolve(res + "111");
})
.then((res) => {
console.log(res, "第二层的10行处理代码");
return Promise.resolve(res + "222");
})
.then((res) => {
console.log(res, "第三层的10行处理代码");
return Promise.resolve(res + "333");
});
6. 链式调用简简简写
省略Promist.resole()
new Promise((resolve, reject) => {
setTimeout(() => {
resolve("aaa");
}, 1000);
})
.then((res) => {
console.log(res, "第一层的10行处理代码");
return res + "111";
})
.then((res) => {
console.log(res, "第二层的10行处理代码");
return res + "222";
})
.then((res) => {
console.log(res, "第三层的10行处理代码");
});
7. 假设reject
new Promise((resolve, reject) => {
setTimeout(() => {
resolve("aaa");
}, 1000);
})
.then((res) => {
console.log(res, "第一层的10行处理代码");
return res + "111";
})
.then((res) => {
console.log(res, "第二层的10行处理代码");
// return res + "222";
return Promise.reject('error')
})
.then((res) => {
console.log(res, "第三层的10行处理代码");
}).catch(err=>{
console.log(err);
});
8. reject 简写 throw ‘error message’ 抛出异常 (Java??)
9. promise的all方法使用
Promise.all(迭代器) //数组可遍历
Promise.all([
// new Promise((resolve,reject){
// $ajax({
// url:'url1',
// success:function(data){
// resolve(data)
// }
// })
// }),
// new Promise((resolve,reject){
// $ajax({
// url:'url2',
// success:function(data){
// resolve(data)
// }
// })
// })
new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('result1')
},2000)
}),
new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('result2')
},1000)
})
]).then(results=>{
console.log(results);
})