ECMA6--Promise/Generator

最新推荐文章于 2023-05-09 15:43:23 发布

转载最新推荐文章于 2023-05-09 15:43:23 发布 · 130 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/LingXiangLi/p/10252679.html

本文探讨了ECMAScript 6中引入的异步编程方法，包括Promise、Promise.all以及Generator函数的使用。通过对比传统的回调函数，展示了Promise和Generator在处理异步请求时的简洁性和优雅性。

ECMA6的异步方法
译文为：承诺
有两个回调函数(resolve(成功),reject(失败))
有一个方法.then

主要使用all

// JQ。3版本以上有promise的方法，本身返回一个
Promise.all([
    $.ajax({url: 'data1',dataType: 'json'}),
    $.ajax({url: 'data2',dataType: 'json'}),
]).then(results=>{
    let [data1, data2] = results;
     alert("成功")
},err=>{
    alert("失败")
})

generator -- 生成器
generat-- 生成

区别
普普通函数--一路到底，无法暂停
generator函数---能暂停

跟挤牙膏一样，next一次执行一下

[注] 不能写箭头函数

//  generator 标志有*
function* show(){
    alert(1);
    // 暂停，
    yield;
    alert(2)
}
// 必须这样写调用方法，是一个Generator对象，里面有一个next对象
let  generatorObj = show();
generatorObj.next();
generatorObj.next()

为什么用generator

请求数据的时候
实现的本质是分割了函数，

yield
既可以传参又可以返回

异步请求方式

回调函数
Promise
generator

异同

普通请求：回调函数比较啰嗦，而Promise与generator简洁优雅
复杂带逻辑：回调函数与Promise啰嗦，generator简洁优雅

回调

$.ajax( {
      url: xxx,
      dataType: 'json',
      success(data1) {
        $.ajax( {
          url: xxx,
          dataType: 'json',
          success(data2) {
            $.ajax( {
                url: xxx,
                dataType: 'json',
                success(data1) {
                  $.ajax( {
                    url: xxx,
                    dataType: 'json',
                    success(data2) {

                    },
                    error(){

                    }
                  })
                },
              error(){

              }
            })
          },
          error(){

          }
        })
      },
      error(){

      }
    })

Promise

Promise.all({
      $.ajax(url: xx, dataType: 'json'),
      $.ajax(url: xx, dataType: 'json'),
      $.ajax(url: xx, dataType: 'json'),
    }).then(results => {},error=>{})

generator

适合复杂的逻辑的读取

runner(function *(){
      let data1 = yield $.ajax({url: xxx, dataType:'json'});
      let data2 = yield $.ajax({url: xxx, dataType:'json'});
      let data3 = yield $.ajax({url: xxx, dataType:'json'});
    })

转载于:https://www.cnblogs.com/LingXiangLi/p/10252679.html