js使用generator函数同步执行ajax任务

function request(url, callback) {

  fetch(url, {mode: ‘cors‘, credentials: ‘include‘, headers: new Headers({ ‘X-Requested-With‘: ‘XMLHttpRequest‘ })})

  .then(response => response.text())

  .then(text => {

    console.log(url);

    console.log(text);

    callback(text);

  })

  .catch((e) => console.log(e));

}

var iterator = null;

function getData(src){

  request(src, function(response){

    iterator.next(JSON.parse(response));

  })

}

function getTpl(src){

  request(src, function(response){

    iterator.next(response);

  });

}

// 同步任务

function render(data, tpl){

  for(var i in data) {

    tpl = tpl.replace("${"+i+"}", data[i]);

  }

  return tpl;

}

// 主逻辑

var getArticles = function* (src){

  console.log(‘begin‘)

  var data = yield getData(src)

  var tpl = yield getTpl(data.tpl)

  var res = render(data, tpl)

  console.log(res)

}

iterator = getArticles(‘data.json‘)

// 开始执行

iterator.next()

// 异步任务模型

原文地址:https://www.cnblogs.com/zj911005/p/9372730.html

时间: 2024-10-03 14:56:33

js使用generator函数同步执行ajax任务的相关文章

一种通过async/await实现函数同步执行的方式

1 const testArr = [ 2 () => { 3 return new Promise((resolve, reject) => { 4 setTimeout(()=> { 5 alert(1); 6 resolve(); 7 }, 300); 8 }); 9 }, 10 () => { 11 return new Promise((resolve, reject) => { 12 setTimeout(()=> { 13 alert(2); 14 res

学JS的心路历程 -非同步执行

JS是单线程的语言,也就是说同一时间只会执行一行程序,所以如果一段程序执行过久就会造成阻塞(blocking)的现象,必须等到它结束后才能执行下一段程序. 举个例子来说,如果我们今天要买便当,但是老板说要十分钟才会好,那难道我们这十分钟内都不能做任何事情吗? 当然不是,JS本身有非同步执行的功能,也是就说我们会先跟这个函式说,你先到旁边继续跑,好了在「回来呼叫」我,我先继续跑其他程序. 有没有看到熟悉的关键字「回来呼叫」,没错非同步执行基本上都是利用callback达成. 举个例子来说,我们今天

Generator 函数的语法

简介 § ? 基本概念 Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同.本章详细介绍 Generator 函数的语法和 API,它的异步编程应用请看<Generator 函数的异步应用>一章. Generator 函数有多种理解角度.语法上,首先可以把它理解成,Generator 函数是一个状态机,封装了多个内部状态. 执行 Generator 函数会返回一个遍历器对象,也就是说,Generator 函数除了状态机,还是一个遍历器对象生成函数.返回的

JavaScript中的Generator函数

1. 简介 Generator函数时ES6提供的一种异步编程解决方案.Generator语法行为和普通函数完全不同,我们可以把Generator理解为一个包含了多个内部状态的状态机. 执行Generator函数回返回一个遍历器对象,也就是说Generator函数除了提供状态机,还是一个遍历器对象生成函数.Generator可以以此返回多个遍历器对象,通过这个对象可以以此访问到Generator函数内部的多个状态. 形式上Generator函数和普通的函数有两点不同,一是function关键字后面

使用Generator函数进行异步编程

Generator函数在工作中还没有用到过,一直在使用async,最近在看async的原理,发现它只是Generator的语法糖. Generator的基础知识之前写过文章介绍过(https://www.cnblogs.com/wangtingnoblog/p/js_Generator.html),这里主要讨论一下怎么使用Generator函数来进行异步编程. 先来看下面的代码: 1 function* g() { 2 console.log('g start') 3 yield setTime

generator函数学习笔记

一.基本概念 Generator函数是一种可以暂停执行,返回iterator对象的函数,yield是暂停标识 function* gen(){ yield 1; yield 2; } Generator函数在function后面有一个*,内部有yield语句 function* gen(){ yield 1; yield 2; return '1' } let g = gen(); //调用Generator函数返回遍历器对象 console.log(g.next())//{"value&quo

Generator 函数的异步应用

异步编程对 JavaScript 语言太重要.Javascript 语言的执行环境是"单线程"的,如果没有异步编程,根本没法用,非卡死不可.本章主要介绍 Generator 函数如何完成异步操作. 传统方法 ES6 诞生以前,异步编程的方法,大概有下面四种. 回调函数 事件监听 发布/订阅 Promise 对象 Generator 函数将 JavaScript 异步编程带入了一个全新的阶段. 基本概念 异步 所谓"异步",简单说就是一个任务不是连续完成的,可以理解成

一次搞懂 Generator 函数

1.什么是 Generator 函数 在Javascript中,一个函数一旦开始执行,就会运行到最后或遇到return时结束,运行期间不会有其它代码能够打断它,也不能从外部再传入值到函数体内 而Generator函数(生成器)的出现使得打破函数的完整运行成为了可能,其语法行为与传统函数完全不同 Generator函数是ES6提供的一种异步编程解决方案,形式上也是一个普通函数,但有几个显著的特征: --  function关键字与函数名之间有一个星号 "*" (推荐紧挨着function

async(await)函数和 Generator 函数 区别

async 函数是 Generator 函数的语法糖. async 函数对 Generator 函数的改进体现在: 1. async 内置执行器. Generator 函数的执行必须靠执行器,需要调用 next() 方法,或者用co 模块:而 async 函数自带执行器.也就是说,async 函数的执行与普通函数一模一样,只要一行. 2. 更好的语义. async 和 await 比起星号和 yield,语义更清楚. 3.更广的适用性. co 模块约定,yield 命令后面只能是 Thunk 函