183  
查询码:00000292
浅谈Promise的使用
作者: 徐文斌 于 2020年01月03日 发布在分类 / 人防组 / 人防前端 下,并于 2020年01月03日 编辑
Promise的使用

什么是Promise

Promise 是异步编程的一种解决方案,其实是一个构造函数,自己身上有all、reject、resolve这几个方法,原型上有then、catch等方法。

Promise对象的特点


  1. 对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是Promise这个名字的由来,它的英语意思就是“承诺”,表示其他手段无法改变。
  2. 一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从pending变为fulfilled和从pending变为rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果,这时就称为 resolved(已定型)。如果改变已经发生了,你再对Promise对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的

为什么要用Promise


在JavaScript的世界中,所有代码都是单线程执行的。

由于这个“缺陷”,导致JavaScript的所有网络操作,浏览器事件,都必须是异步执行。前端开发的时候会在请求到的成功回调函数中继续写函数,长此以往就形成了回调地狱


function load() {
    $.ajax({
        url: 'xxx.com',
        data: 'jsonp',
        success: function(res) {
            init(res, function(res) {
                render(res, function(res) {
                    // 一层一层又一层
                });
            });
        }
    }
}

load();

一层两层还好,但是多起来就无法维护了,无论是开发自己还是同事来维护,都是极其无奈的。。。。。

axios就调用了Promise,所以在请求返回之后可以使用.then和.catch来写成功失败的方法。话不多说,直接看使用方法吧

使用方法

粘贴图片


var upFunc = new Promise(function(resolve, reject) {
此处省略一系列方法,请求。
         resolve();
});
 upFunc.then(() => {
     _this.returnDataFun();  // 在upFunc执行完毕后想要执行的操作
  });





 推荐知识

 历史版本

修改日期 修改人 备注
2020-01-03 16:15:10[当前版本] 徐文斌 Promise的使用

 附件

附件类型

PNGPNG

知识分享平台 -V 4.8.7 -wcp