当前位置: 首页 / 技术分享 / 正文
Promise、generato....sync类同步编程

2022-11-25

   res ajax

  受javascript语言特性的影响,编程过程中充斥着大量异步回调,这会让代码维护起来特别麻烦,一步步走向回调地狱。社区中最早提出Promise解决方案,es6将其融入语法标准,并提供了generator、async,向类同步编程不断努力。本文会通过这三个方面演示类同步进化过程。 ##1.Promise Promise提供异步编程的容器,包含异步代码,在得到异步结果时,通过resolve传递数据(resove对应then所指定的函数,其实也就是单个过程的异步回调,可以理解成将之前的回调函数放在then方法中定义)。 ######以ajax请求封装为例:

  传统形式

  function ajax(url, success) {

  var xhr = new XMLHttpRequest();

  xhr.open("GET", url);

  xhr.send();

  xhr.onreadystatechange = function () {

  if (xhr.status == 200 && xhr.readyState == 4) {

  //将请求结果作为实参传入成功回调

  success(xhr.responseText);

  }

  }

  }

  //如果两个异步过程有先后顺序,则会出现这种嵌套情况

  ajax("http://vebcoder.cn:9527/api/getTypeOne", function (res) {

  console.log(res);

  ajax("http://vebcoder.cn:9527/api/goodList", function (res) {

  console.log(res);

  })

  })

  Promise形式

  function ajax(url) {

  //promise容器包裹异步过程

  return new Promise(resolve => {

  var xhr = new XMLHttpRequest();

  xhr.open("GET", url);

  xhr.send();

  xhr.onreadystatechange = function () {

  if (xhr.status == 200 && xhr.readyState == 4) {

  //将异步结果使用resolve进行传递

  resolve(xhr.responseText);

  }

  }

  })

  }

  ajax("http://vebcoder.cn:9527/api/getTypeOne")

  .then(res=>{

  console.log(JSON.parse(res))

  })

  .then(()=>{

  return ajax("http://vebcoder.cn:9527/api/goodList")

  })

  .then(res=>{

  console.log(JSON.parse(res))

  })

  解决了回调函数横向发展的问题,变成了纵向发展结构。直观确实很直观但是一大堆的then方法,!接下来generator登场

  2.generator

  乍一看,generator不过是一个有多个返回值的函数而已,奥妙在于如果不调用next方法,代码会停止执行的。

  基础用法

  //function后加*

  function* Gen(){

  console.log(1);

  yield;

  console.log(2)

  yield;

  console.log(3);

  return;

  }

  //调用函数获得指针对象

  var g=Gen();

  g.next();//1

  g.next();//2

  g.next();//3

  第一次调用next执行到第一个yield,第三次执行到函数末尾return的位置。

  奥妙之处

  function* Gen(){

  //用变量接收yield命令

  var res=yield;

  console.log(res)

  }

  var g=Gen();

  g.next();

  //next传入参数

  g.next(100);//100

  第一次调用next方法,代码执行到yield停止执行。第二次调用next传入参数,代码继续执行,并将传入next的参数赋值给res变量。next方法可以带一个参数,该参数就会被当作上一个yield表达式的返回值。 那么我们就可以这样做:

  //上述封装的ajax方法-传统形式

  function* Gen(){

  //请求成功开始下一步

  ajax("http://vebcoder.cn:9527/api/getTypeOne",res=>{g.next(res)})

  // 接收yield返回值

  let res=yield;

  console.log(res)//请求的数据结果

  }

  var g=Gen();

  // 开始执行代码

  g.next();

  //上述封装的ajax方法-Promise形式

  function* Gen(){

  //请求成功开始下一步

  ajax("http://vebcoder.cn:9527/api/getTypeOne").then(res=>{g.next(res)})

  // 接收yield返回值

  let res=yield;

  console.log(res)//请求的数据结果

  }

  var g=Gen();

  // 开始执行代码

  g.next();

  使用口诀:上一步回调,下一步,接收yield等待结果传入

  按理说这种形式已经不错了,不用再往下看了,除非你能忍住!

  3.async

  async是generator的语法糖,你只需关注两部、步操作就行。相当于对Promise和generator进行了融合。

  async function Asy(){

  //等待promise实例

  let res=await ajax("http://vebcoder.cn:9527/api/getTypeOne")

  console.log(res)//请求的数据结果

  }

  Asy();

  //结合自执行函数

  ;(async function(){

  let res=await ajax("http://vebcoder.cn:9527/api/getTypeOne")

  console.log(res)//请求的数据结果

  }())

  async函数就是将Generator 函数的星号(*)替换成async,将yield替换成await。 注意:await后面需要跟一个promise实例,无需手动传递结果!

  最后来一个对比(有次序的异步过程):

  //传统方式(对应上述传统ajax封装形式)

  ajax("http://vebcoder.cn:9527/api/getTypeOne", function (res) {

  console.log(res);

  ajax("http://vebcoder.cn:9527/api/goodList", function (res) {

  console.log(res);

  })

  })

  //promise (对应上述promise ajax封装形式)

  ajax("http://vebcoder.cn:9527/api/getTypeOne")

  .then(res=>{

  console.log(JSON.parse(res))

  })

  .then(()=>{

  return ajax("http://vebcoder.cn:9527/api/goodList")

  })

  .then(res=>{

  console.log(JSON.parse(res))

  })

  //generator (对应上述promise ajax封装形式)

  function* Gen(){

  //请求成功开始下一步

  ajax("http://vebcoder.cn:9527/api/getTypeOne").then(res=>{g.next(res)})

  // 接收yield返回值

  let res=yield;

  console.log(res);

  ajax("http://vebcoder.cn:9527/api/goodList").then(res=>{g.next(res)})

  // 接收yield返回值

  let res2=yield;

  console.log(res2);

  }

  var g=Gen();

  // 开始执行代码

  g.next();

  //async (对应上述promise ajax封装形式)

  // 发送请求

  ;(async function(){

  let res=await ajax("http://vebcoder.cn:9527/api/getTypeOne")

  console.log(res)//请求的数据结果

  let res2=await ajax("http://vebcoder.cn:9527/api/goodList")

  console.log(res2)//请求的数据结果

  }())

  async有更好的语义,几乎达到与同步代码一样的编程体验!

好程序员公众号

  • · 剖析行业发展趋势
  • · 汇聚企业项目源码

好程序员开班动态

More+
  • HTML5大前端 <高端班>

    开班时间:2021-04-12(深圳)

    开班盛况

    开班时间:2021-05-17(北京)

    开班盛况
  • 大数据+人工智能 <高端班>

    开班时间:2021-03-22(杭州)

    开班盛况

    开班时间:2021-04-26(北京)

    开班盛况
  • JavaEE分布式开发 <高端班>

    开班时间:2021-05-10(北京)

    开班盛况

    开班时间:2021-02-22(北京)

    开班盛况
  • Python人工智能+数据分析 <高端班>

    开班时间:2021-07-12(北京)

    预约报名

    开班时间:2020-09-21(上海)

    开班盛况
  • 云计算开发 <高端班>

    开班时间:2021-07-12(北京)

    预约报名

    开班时间:2019-07-22(北京)

    开班盛况
在线咨询
试听
入学教程
立即报名

Copyright 2011-2023 北京千锋互联科技有限公司 .All Right 京ICP备12003911号-5 京公网安备 11010802035720号