JavaScript - Promise の非同期操作に関する疑問と、それをよりエレガントに記述する方法
大家讲道理
大家讲道理 2017-07-05 11:04:56
0
3
749
  • ここ数日、「promise」に関する技術的な記事をたくさん読みましたが、目がくらむばかりで、ほんの少しの知識とその機能を大まかに理解しているだけです。

  • まず問題について話しましょう。プロジェクトでは Ajax が最も使用されています。「複数の Ajax 依存関係リクエスト」という非常に不快な問題があります。次のように仮定します: R1 > R2( r1_result ) > R3( r2_result )、
    最も問題のない方法は、すべてを同期することです。結果はひどいものになります。ページがフリーズして読み込みが停止すると、非同期操作を使用する際に不快な点となるのは、コールバックの層が何層にもわたって行われることです。今後さらに増えるでしょう。 . 操作により異なります。

  • 人生は投げ銭なので、最初の段落に戻っていろいろ読んでいると、ある兄弟が約束の原理を分析していました。この兄弟のコードです。http://malcolmyu。 github.io/ma...

リーリー
  • これを読んで、また不思議に思ったのですが、 then( function(){ do... } )、これってコールバックではないでしょうか? ひょっとして、投げる意味は、シュガー構文を使用してください(信じられません)。

  • 存在は合理的です。結局のところ、promise を合理的に使用する方法と、ajax プロセスをよりエレガントに操作する方法はどうすればよいでしょうか?ちなみに( axios\fetch.js )を使ってみていかがでしょうか?

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

全員に返信(3)
伊谢尔伦

Promise 就是为了解决异步流程控的而生的,其使用核心就是then方法;
then初看起来是很像回调,但then的特质是可以处理异常及链式写法.
打个比方,几个ajax请求依赖如下:

A1 -> A2;
Aa -> Ab;
Ab + Ac -> Ad;
A2 + Ad -> Ax;

如果用Promise,代码会很清晰
首先准备好 A1,A2,Aa,Ab,Ac,Ad,Ax 都是根据依赖反回promise对像的函数,我就不写了
然后可以看Promise表演了:

Promise.all([
    A1().then(A2),      //A1 -> A2
    Promise.all([
        Aa().then(Ab),  //Aa -> Ab
        Ac()            //Ac
    ]).then(Ad)         //Ab + Ac -> Ad;
]).then(Ax,Err)         //A2 + Ad -> Ax
.then(function(v){
//完成
})

A1,Aa和Ac没有依赖,会并发执行,之后会根据依赖完成的情况来继续,
不论哪一个Ajax出问题,都会触发最后的Err事来统一处理错误;
如果你用回调来写一下试试,要么效率不好,要么回调方法里加一堆代码来判断依赖的情况.

参考代码:

//首先准备好 A1,A2,Aa,Ab,Ac,Ad,Ax 都是基于回调的异步函数
var a2,ab,ac,ad;  //用来保存完成情况的变量
function runAx(){
    if(a2 == undefined || ad == undefined) return; //判断依赖
    Ax(a2,ad,function(e,v){
        //完成
    })
}
function runAd(){
    if(ab == undefined || ac == undefined) return; //判断依赖
    Ad(ab,ac,function(e,v){
        ad = v;
        runAx();
    })
}
A1(function(e,v){   
    A2(v,function(e,v){
        a2 = v;
        runAx();
    })
})
Aa(function(e,v){
    Ab(v,function(e,v){
        ab = v;
        runAd();
    })
})
Ac(function(e,v){
    ac = v;
    runAd();
})

上面的代码没有去处理error,就这么长了,如果依赖再复杂一点,可以想象代码量,而且容易写错;

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!