前言
本博客仅做学习笔记,如有侵权,联系后即刻更改
科普:
定义
异步编程的解决方案
常见应用场景:
- 网络请求
一般情况下,对异步操作进行封装
- new -> 构造函数
- 保存状态信息
- 执行传入的函数)
- 在执行传入的回调函数时,会传入resolve、reject,本身也是函数
Promise基本使用
new Promise((resolve, reject) => {
setTimeout(() => {
// 成功时调用
// resolve('hello1')
// 失败时调用
reject('error')
},1000)
}).then((data) => {
console.log(data);
}).catch((data) => {
console.log(data);
})
回调函数合并
//then和catch合并为一个then函数
new Promise((resolve, reject) => {
setTimeout(() => {
// 成功时调用
resolve('hello1')
// 失败时调用
// reject('error')
},1000)
}).then((data) => {
console.log(data);
},(data) => {
console.log(data);
})
Promise链式调用
网络请求: 处理代码分段需求
链式调用
- 简写: new Promise(resolve => resolve(结果))
- 再简写: 省略掉Promise.resolve
- 抛出异常时,后面的网络请求中断
new Promise((resolve,reject) => {
setTimeout(() =>{
resolve('000')
},1000)
}).then(res => {
console.log(res,'第一层代码');
return new Promise((resolve, reject) => {
// resolve(res + '111')
//抛出异常
// reject('error')
throw 'error plus'
})
}).then(res => {
console.log(res,'第二层代码');
}).catch(err => {
console.log(err);
})
//简写: new Promise(resolve => resolve(结果))
//return Promise.resolve(res + '111')
// 再简写: 省略掉Promise.resolve
//return res + '111'
Promise的All方法
应用场景
- 多个网络请求
都得到数据后才能进行下一步操作
all使用
// 使用setTimeout模拟网络请求
// 延时为一秒的会等待二秒延时同时输出
Promise.all([
new Promise((resolve, reject) => {
setTimeout(() => {
resolve({name: 'zjc', age: 20})
},2000)
}),
new Promise((resolve, reject) => {
setTimeout(() => {
resolve({name: 'zjc', age: 21})
},1000)
})
]).then(results => {
console.log(results);
})
使用变量记录实现
定义变量记录网络请求状态
let isResult1 = false
let isResult2 = false
// 请求一:
$ajax({
url : "",
success : function() {
console.log('结果1');
isResult1 = true
handleResult()
}
})
//请求二:
$ajax({
url : ' ',
success : function() {
console.log('结果2');
isResult2 = true
handleResult()
}
})
//判断两个请求都完成后进行下一步处理
function handleResult(){
if (isResult1 && isResult2) {
//
}
}
总结
小小励志
有些事你现在不做,一辈子都不会做了。
如果你想做一件事,全世界都会为你让路。
《搭车去柏林》