• 基本使用Promise(resolve,reject)


    Promise(resolve,reject)的基本使用

     

    什么是Promise?

    Promise是一个构造函数,其原型上有 then、catch方法,还有reslove,reject等静态方法。通过创建Promise实例,可以调用Promise.prototype上的then、catch方法。

    Promise的作用

    MDN对Promise的描述:

    Promise能够将异步操作最终成功返回值或者失败原因和相应的处理程序关联起来。 这样使得异步方法可以像同步方法那样返回值:异步方法并不会立即返回最终的值,而是会返回一个 Promise,以便在未来某个时候把值交给使用者。

    简单来说就是:使异步方法也能够根据其操作最终结果是成功还是失败的具体情况绑定不同的后续处理事件

    Promise的使用

    一个 Promise 必然处于以下几种状态之一:(其中fulfilled状态和rejected状态也称作settled状态

    1、pending : 初始状态,既没有被兑现,也没有被拒绝。

    2、fulfilled : 意味着操作成功完成。

    3、rejected : 意味着操作失败。

    处于初始状态(pending)的Promise,最终要么成功(fulfilled )要么失败(rejected ),无论成功还是失败,通过then方法调用相关处理程序。

    在实例化Promise的时候需要传入 resolve 和 reject 这两个函数作为其参数,当异步任务顺利完成且返回结果值时,会调用 resolve 函数;而当异步任务失败且返回失败原因(通常是一个错误对象)时,会调用reject 函数。

    then函数中有两个参数,如下:

    1
    promise.then(successCallback, failureCallback);

    第一个参数是状态变为成功后应该执行的回调函数,第二个参数是状态变为失败后应该执行的回调函数。

    具体使用例子:

    复制代码
    let testPromise = new Promise((resolve,reject)=>{
            setTimeout(function(){
               // resolve('成功!') //状态为成功,传的参数作为then函数中成功函数的实参
               reject('失败!') //状态为失败,传的参数作为then函数中失败函数的实参
            }, 1000);
    });
    
    testPromise.then((data)=>{
        console.log('success'+data)
    },(err)=>{
        console.log('fail'+err)
    })    
    复制代码

    打印结果 "fail失败!"

    其中 data 和 err 就是上面调用 resolve 和 reject 方法传入的值。

    Promise链式调用

    由上面例子可以知道 Promise链式调用可以实现多个异步操作连续执行,且上个操作执行成功后,执行下一个操作,并包含上个操作返回的结果。

    因此链式调用可以很好解决 回调地狱 问题,避免了一层又一层的嵌套,虽然代码量可能没有减少,但是代码结构更加清晰、易读。

    回调地狱例子:

    复制代码
    toDoA(function(result) {
      toDoB(result, function(newResult) {
        toDoC(newResult, function(finalResult) {
          console.log('最终结果: ' + finalResult);
        }, failureCallback);
      }, failureCallback);
    }, failureCallback);
    复制代码

    使用链式回调:

    复制代码
    toDoA()
    .then(result => toDoB(result))
    .then(newResult => toDoC(newResult))
    .then(finalResult => {
      console.log(`'最终结果': ${finalResult}`);
    })
    .catch(failureCallback);
    复制代码

    catch(failureCallback)可以看做then(null,failureCallback)

    更多使用方法可以参考MDN

  • 相关阅读:
    Uni项目启动微信、QQ、淘宝、抖音、京东等APP的方法
    input 标签为checkbox时修改 checkbox的样式
    关于CSS HACK
    前端JS生成可用的MD5加密代码
    把ucharts 封装成组件
    学期总结
    作业1
    作业02
    C语言I博客作业09
    C语言I博客作业08
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/15878751.html
Copyright © 2020-2023  润新知