Promise key issues
Article Directory
Modify the user's status
If there is no res(value) or rej(value), the current state is generally pedding
<script>
let p = new Promise((res,rej)=> {
//res('ok') // 成功情况下 把原来的pending => fulfilled(res)
//rej('err') // 失败时 把pending => rejected
//抛出错误
throw '出问题'
})
console.log(p);
</script>
Execute multiple callbacks
promise specifies multiple success/failure callback functions, which are called when the promise changes to the corresponding state
<script>
let p = new Promise((res, rej) => {
res('ok') //当pending => fulfilled(res)，就可以执行以下回调，若不执行res，即pedding没有改变，则无法进去回调
})
//指定回调1
p.then(val => {
console.log(val)
})
//指定回调2
p.then(val => {
alert(val)
})
</script>
Sequence of mutating state and specifying callbacks
Under the synchronous task, the state is changed first and then the callback is executed; under the asynchronous task, the state is changed after the callback is executed first (the following code outputs ppp)
Change the state first and then execute the callback method
1. Call res()/rej() directly in the executor
2. Extend longer events before calling then
method of getting data
Regardless of whether the state is changed first or later, the then callback must be triggered through res/rej
<script>
// 同步任务下是先改变状态后执行回调；异步任务下是先执行回调后改变状态
let p = new Promise((res, rej) => {
setTimeout(()=> {
res('ok')
},1000)
})
p.then(val => {
console.log('ppp')
})
</script>
then method returns result characteristics
promise.then() returns the result state of the new promise is determined by the result of the execution of the callback function specified by then()
<script>
// 同步任务下是先改变状态后执行回调；异步任务下是先执行回调后改变状态
let p = new Promise((res, rej) => {
// setTimeout(()=> {
res('ok')
// },1000)
})
let result=p.then(val => {
// console.log('ppp')
// 1 抛出问题
// throw '问题'
// 2、返回的结果是非promise对象
// return 555
// 3、返回的结果是promise对象
return new Promise((res, rej) => {
//res('success') //promise的值为success
rej('err') //promise的值为err
})
},reason=> {
console.warn(reason);
})
console.log(result);
</script>
Promise chains multiple operation tasks
promise.then() returns a new promise, which can be opened into a then() chain call
Chain multiple synchronous/asynchronous tasks through then() chain calls
<script>
let p = new Promise((res, rej) => {
setTimeout(()=> {
res('ok')
},1000)
})
p.then(val => {
return new Promise((res, rej) => {
//如果没有return默认返回undefined
res('success')
})
},reason=> {
console.warn(reason);
}).then(val => {
console.log(val); //获取的结果是success
}).then(val => {
console.log(val); //获取的结果是undefined
})
// （第一个then）p.then返回结果是Promise，而Promise状态由他所指定的回调函数的返回值决定, 倒数第二个（then）中的promise回调没有声明返回值
</script>
Promise exception penetration
When using promise's then chain call, you can specify the failed callback at the end
If an exception occurs in any of the previous operations, you can specify a failed callback at the end
<script>
let p = new Promise((res, rej) => {
setTimeout(()=> {
rej('不ok')
},1000)
})
p.then(val => {
console.log(111);
}).then(val => {
console.log(222);
}).then(val => {
console.log(333);
}).catch(err=> {
console.warn(err);
})
</script>
Break the promise chain
When using the chain call of promise, it is interrupted in the middle, and the subsequent callback function is no longer called
Method: return a promise object of pedding state in the callback function
<script>
let p = new Promise((res, rej) => {
setTimeout(()=> {
res('不ok')
},1000)
})
p.then(val => {
console.log(111);
//想要中断promise链，有且只有一个办法，就是把状态改回pedding，当状态为pedding的时候就不会再执行then
return new Promise(()=> {
} )
}).then(val => {
console.log(222);
}).then(val => {
console.log(333);
}).catch(err=> {
console.warn(err);
})
</script>