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

Posted 2020-12-25 镜镜哒

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()

// 异步任务模型