zoukankan      html  css  js  c++  java
  • Promise 用法小结

    Promise

    一、解决问题

    我们知道Promise是javaScript中异步编程的一种解决方法。在介绍Promise前,我们思考下Promise 的诞生解决了哪些问题呢?

    ES6之前,我们使用回调函数和事件处理异步操作,用来解决javaScript单线程运行时可能导致的UI渲染阻塞的问题

    事件:对象的某个属性是一个函数,当发生某种行为时,运行该函数

    callback回调函数:运行某个函数以实现某个功能的时候,传入一个函数作为参数,在某个特定条件下触发该函数

    但是,使用回调函数也带来几个问题:

    1. 回调函数放在参数的位置,嵌套回调造成回调地狱
    2. 回调函数的代码和开始任务代码不在同一事件循环中,异步同步任务不能联系
    3. 处理并行任务棘手,请求之间互不依赖

    二、解决方案——异步模型

    1. ECMA将异步操作分为三个状态:

      pedding——等待状态(未决阶段),表示事件还在进行中

      resolved——已经处理(已决阶段),表示事件产生预期的结果

      rejected——已拒绝(已决阶段),表示事件产生偏离预期的结果

      我们使用网络请求解释三种状态,请求的过程是pedding状态,请求结果状态码为200为resolved状态,请求结果状态码是500为rejected状态

    2. pedding状态具有一定控制走向的能力

      resolve方法——将事件推向resolved状态,并且可以传递一些数据

      reject方法——将事件推向rejected状态,并且附带一些错误信息

      只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态

    3. 一旦状态更改,不再变化。任何时候都可以获得结果

    4. 事件到达已决阶段需要进行后续处理

      thenable函数——作为resolved状态的后续处理

      catchable函数——作为rejected状态的后续处理

    三、基本用法

    Promise是一个容器,保存着在某个未来结束的异步操作的结果

    let promise = new Promise((resolve, reject) => {
    	/*
    	1.函数内部代码立即执行,不可取消
    	2.放置ajax请求等异步操作的位置
    	3.通过调用resolve函数将Promise推向已决的resolved状态
    	4.通过调用rejected将Promise推向已决的rejected状态
        */
        if(/*异步操作成功*/) {
           resolve(data)
        } else {
           reject(error) 
        }  
    })
    promise.then((res) => {
        /*
    	1.thenable函数,进入resolved状态立即执行
    	2.当前为pedding状态,加入任务队列
        */
        console.log("回调成功")
    }).catch((error) => {
        /*
    	1.catchable函数,进入rejected状态立即执行
    	2.当前为pedding状态,加入任务队列
        */
        console.log("回调失败")
    })
    

    四、Promise 链式调用

    promise实例,每次then方法或者catch方法结束后都会返回一个新的Promise实例

    如果前一个promise实例的状态是 resolved 并且then()的回调函数没有出错,将回调函数的返回值作为下一个then回调函数的参数

    const myPromise = new Promise((resolve, reject) => {
        resolve('helloWorld');
    })
    myPromise.then(res => {
        console.log(res); // 'helloWorld'
        return 1;
    }).then(res => {
        console.log(res); // 输出1
    })
    

    如果前一个promise实例的状态是 resolved 但是then()的回调函数发生错误,将抛出的错误信息作为下一个catch回调函数的参数

    const myPromise = new Promise((resolve, reject) => {
        resolve('helloWorld');
    })
    myPromise.then(res => {
        console.log(res); // 'helloWorld'
        throw new Error("test")
        return 1;
    }).then(res => {
        console.log("data:",res); 
    }, error => {
        console.log("error:", error) //error: Error: "test"
    })
    

    如果前一个promise实例的状态是 rejected 但是then()的没有处理错误的回调函数,将抛出的错误信息作为下一个catch回调函数的参数

    const myPromise = new Promise((resolve, reject) => {
        reject('helloWorld');
    })
    
     myPromise.then(res => {
        console.log('helloWorld');
        //上方触发了reject, 没有相对应的处理catchable函数
        //错误直接抛给下一个Promise并触发下一个Promise的rejected状态
    }).catch(error => {
        console.log("error:",error); //error: helloWorld
    })
    

    如果在 then 中使用return,那么 return 的值也会Promise.resove()包装

    五、Promise API

    (一) Promise.prototype.then()

    then()方法的作用是为 Promise实例添加状态改变时的回调函数

    接收两个参数,resolved状态的回调函数和rejected状态的回调函数。第二个参数可选

    then方法返回的是一个新的Promise实例,实现链式调用

    getJSON("/posts.json").then(function(json) {
      return json.post;
    }).then(function(post) {  
      //将上一个回调函数结果作为参数传入第二个回调函数
    });
    

    (二)Promise.prototype.catch()

    catch()方法用于指定发生错误时的回调函数,

    异步操作抛出错误,状态变为rejected,立即调用catch(),并且可以捕获 promise实例中抛出的错误

    在创建Promise实例传入的函数参数中, 如果代码报错, 则会立即触发reject方法

    const promise = new Promise(function(resolve, reject) {
      throw new Error('test');
    });
    promise.catch(function(error) {
      console.log(error);
    });
    // Error test
    

    (三) Promise.prototype.finally()

    finally()方法用于指定Promise 对象都会执行的操作,不管最后状态如何

    finally方法的回调函数不接受任何参数

    romise
    .then(result => {···})
    .catch(error => {···})
    .finally(() => {···})
    

    (四) Promise.all()

    Promise.all()方法用于将多个 Promise 实例,包装成一个新的 Promise 实例,

    const p = Promise.all([p1, p2, p3]);
    

    p的状态由p1、p2、p3决定,分成两种情况

    (1)只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数

    (2)只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数

    需要同时等待多个Promise异步操作完成以后再做某件事的话可以用到Promise.all()

    const getGirlResponse = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(Math.random() > 0.5 ? '1同意了' : '1拒绝表白');
        }, 1000)
    })
    const getSecGirlResponse = new Promise((resolve, reject) => {
       setTimeout(() => {
           if(Math.random() > 0.5) {
               resolve(Math.random() > 0.5 ? '2同意了' : '2拒绝表白');
           } else {
               reject("2打了你一巴掌")
           }
        }, 1000)
    })
    const getTrdGirlResponse = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(Math.random() > 0.5 ? '3同意了' : '3拒绝表白');
        }, 1000)
    })
    Promise.all([getGirlResponse, getSecGirlResponse, getTrdGirlResponse]).then(resp => {
        console.log(resp); 
    }).catch(error => {
        console.log(error);
    })
    

    (五) Promise.race()

    Promise.race()方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例

    const p = Promise.race([p1, p2, p3]);
    

    只要p1、p2、p3之中有一个实例率先改变状态,p的状态就跟着改变。率先改变的 Promise 实例的返回值,就传递给p的回调函数

    let intervalTime = () => Math.random() * 2000 
    const getGirlResponse = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(Math.random() > 0.5 ? '1同意了' : '1拒绝表白');
        }, intervalTime())
    })
    const getSecGirlResponse = new Promise((resolve, reject) => {
       setTimeout(() => {
            resolve(Math.random() > 0.5 ? '2同意了' : '2拒绝表白');
        }, intervalTime())
    })
    const getTrdGirlResponse = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(Math.random() > 0.5 ? '3同意了' : '3拒绝表白');
        }, intervalTime())
    })
    Promise.race([getGirlResponse, getSecGirlResponse, getTrdGirlResponse]).then(resp => {
        console.log(resp); 
    }).catch(error => {
        console.log(error);
    })
    

    (六)Promise.resolve()

    Promise.resolve()方法将现有对象转为 Promise 对象

    Promise.resolve()方法允许调用时不带参数,直接返回一个resolved状态的 Promise 对象

    (七)Promise.reject()

    Promise.reject(reason)方法也会返回一个新的 Promise 实例,该实例的状态为rejected

    六、常见使用

    (一)嵌套任务处理

    //多个异步任务之间存在依赖性的
    getJson("url")
        .then(n => {getJson(n[0].url)})
        .then(m => {getJson(m[0].url)})
        .then(w => {getJson(w[0].url)})
        .catch((error => {console.log("异常错误")}))
    
    1. then方法返回一个 promise 对象,连续调用 then 方法就能链式调用 promise
    2. 多个异步任务中可能出现错误,只需要调用一个 catch 方法并向其传入错误处理的回调函数

    (二)并行处理任务

     // 并行处理多个异步任务
    Promise.all([getJson(url), getJson(url), getJson(url)])
      .then((resule) => {
        // 如果三个请求都响应成功
        if (result[0] == 1 && result[1] == 1 && result[2] == 1) {
          console.log("请求成功");
        }
      })
      .catch((error) => {
        console.log("异常错误");
      });
    

    七、实现 Promise

    参考文档

    https://blog.csdn.net/weixin_44238796/article/details/103159716

    https://juejin.im/post/5e4943d0f265da57537eaba9#heading-19

    https://mp.weixin.qq.com/s/UNzYgpnKzmW6bAapYxnXRQ

  • 相关阅读:
    Cheatsheet: 2010 05.25 ~ 05.31
    Cheatsheet: 2010 07.01 ~ 07.08
    Cheatsheet: 2010 07.22 ~ 07.31
    Cheatsheet: 2010 06.01 ~ 06.07
    Cheatsheet: 2010 05.11 ~ 05.17
    Cheatsheet: 2010 06.08 ~ 06.15
    Cheatsheet: 2010 06.16 ~ 06.22
    Cheatsheet: 2010 06.23 ~ 06.30
    2020.7.20第十五天
    2020.7.19第十四天
  • 原文地址:https://www.cnblogs.com/zengbin13/p/12901561.html
Copyright © 2011-2022 走看看