Ajax,Promise,gennertor/yield ,async/await

28 阅读1分钟

ajax回调地狱

获取学生id,再获取学生信息,再获取该同学女朋友???

  var url = "/myId";
  var xhr = new XMLHttpRequest();
  xhr.open("get", url); 
  xhr.send();
  xhr.onreadystatechange = function() {
    if (xhr.status == 200 && xhr.readyState == 4) {
      var info = xhr.responseText;
      var obj = JSON.parse(info); 
    }
  };

Promise链式调用

  let id = new Promise((resolve, reject) => {
    resolve("吊毛id");
  });
  id.then(id => {
    return new Promise((resolve, reject) => {
      resolve("通过吊毛id获取信息");
    });
  })
  .then(info => {
    return new Promise((resolve, reject) => {
      resolve("通过info获取吊毛女朋友信息");
    });
  })
  .then(info => {
    console.log(`大家的女朋友${info}`);
  });

gennertor/yield

function*: 定义一个生成器函数,返回一个Generator对象。next()方法调用迭代器

        function getId() {
            return ("吊毛id");
        }

        function getInfo(val) {
            return (`吊毛女朋友${val}`);
        }

        function getMm(val) {
            return (`大家的女朋友${val}`);
        }

        function* getmmInfo() {
            let mm = ''
            mm = yield getId();
            mm = yield getInfo(mm)
            mm = yield getMm(mm)
        }
        let fn = getmmInfo()
        let id = fn.next()
        let info = fn.next(id.value)
        console.log(fn.next(info.value))

async/await

在async函数内,使用await关键字取代then函数,等待获取Promise对象成功或者失败状态的结果值

  let id = await new Promise((resolve, reject) => {
    resolve("吊毛id");
  });
  let info = await new Promise((resolve, reject) => {
    resolve(id);
  });
  let mm = await new Promise((resolve, reject) => {
    resolve(info);
  });
  console.log(`大家的女朋友${info}`);