function fn1(callback) {
setTimeout(()=>{
console.log('fn1')
callback()
}, 1000)
}
function fn2(callback) {
setTimeout(()=>{
console.log('fn2')
callback()
}, 1000)
}
function fn3() {
setTimeout(()=>{
console.log('fn3')
}, 1000)
}
// 回调地狱!
fn1(function(){
fn2(function(){
fn3()
})
})
Promise 解决了回调地狱问题,不会导致难以维护;
合并多个异步请求,节约时间。
Promise
Promise 是一个对象,对象里存储一个状态,这个状态是可以随着内部的执行转化的,为以下三种状态之一:等待态(Pending)、完成态(Fulfilled)、拒绝态(Rejected)。
创建 Promise
const myFirstPromise = new Promise((resolve, reject) => {
// ?做一些异步操作,最终会调用下面两者之一:
resolve(someValue); // fulfilled
reject("failure reason"); // rejected
});
function myAsyncFunction(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.onload = () => resolve(xhr.responseText);
xhr.onerror = () => reject(xhr.statusText);
xhr.send();
});
};
Promise.all 、Promise.race
function fn(){
return new Promise((resolve,reject)=>{
成功调用 resolve
失败调用 reject
})
}
//`then()` 方法返回一个 [`Promise`]。它最多需要有两个参数:Promise 的成功和失败情况的回调函数。
fn().then(success,fail).then(success2,fail2)
// promise1和promise2都成功才会调用success1
Promise.all([promise1,promise2]).then(success1,fail1)
// promise1和promise只要有1个成功就会调用success1
//promise1和promise2只要有一个失败就会调用fail1;
//总之,谁第一个成功或失败,就认为是race的成功或失败。
Promise.race([promise1,promise2]).then(success1,fail1)
finally()
方法返回一个[Promise
]。在promise结束时,无论结果是fulfilled或者是rejected,都会执行指定的回调函数。
catch()
方法返回一个[Promise],并且处理拒绝的情况。
手写Promise
class Promise2 {
succeed = null
fail = null
state = 'pending'
constructor(fn) {
fn(this.resolve.bind(this), this.reject.bind(this))
}
resolve(result) {
setTimeout(() => {
this.state = 'fulfilled'
this.succeed(result)
})
}
reject(reason) {
setTimeout(() => {
this.state = 'rejected'
this.fail(reason)
})
}
then(succeed, fail) {
this.succeed = succeed
this.fail = fail
}
}
```
网友评论