Promise

作者: fanison | 来源:发表于2020-06-30 23:11 被阅读0次
    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
            }
        }
    
       ```

    相关文章

      网友评论

          本文标题:Promise

          本文链接:https://www.haomeiwen.com/subject/dgnfqktx.html