Promise

2020-06-30  本文已影响0人  fanison
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
        }
    }

   ```
上一篇 下一篇

猜你喜欢

热点阅读