Promise

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
        }
    }

   ```
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容