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

//@author wangbinandi@gmail.com

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()
// 异步任务模型

 更简短的 async 函数

// @author wangbinandi@gmail.com

async function getArticles2(url) {
 console.log(url);
  var res1 = await fetch(url);
  var data = await response.json();
  var res2 = await fetch(data.tpl);
  var tpl  = await res2.text();
  return render(data, tpl)
}

getArticles2('data.json').then(console.log)

 

转载于:https://www.cnblogs.com/andiwang/p/7477811.html