这篇文章就简单的用Generator和Promise实现以下async，await。

具体生成器的知识点，可以去ES6入门教程详细了解

封装ajax

在这之前，先使用Promise简单封装以下ajax

      function getJSON(config) {
        const { method = "get", url, data = null } = config;
        return new Promise((resolve, reject) => {
          const xhr = new XMLHttpRequest();
          xhr.open(method, url);
          xhr.send(data);

          xhr.onreadystatechange = () => {
            if (xhr.status === 200 && xhr.readyState === 4) {
              resolve(JSON.parse(xhr.responseText));
            }
          };
        });
      }

编写生成器函数

function* generator() {
  try {
    const data1 = yield getJSON({
      url:
        "https://www.dingshiyi.top:9002/article/get_articles1limit=8&page=1&type=1",
    });
    console.log(data1, "data1");

    const data2 = yield getJSON({
      url:
        "https://www.dingshiyi.top:9002/article/get_articles1limit=8&page=1&type=1",
    });
    console.log(data2, "data2");
  } catch (err) {
    console.log(err);
  }
}

async 函数

我们主要是利用了next()传入的值，作为上一次yield的返回值。当一次请求完成之后，那么就会调用.then然后调用next再执行到下一个yield。这里利用了生成器的特点。相关知识点可以去阮一峰的ES6入门教程，地址链接在开头。

function async(generator) {
  const iterator = generator();

  function handle(iteratorResult) {
    if (iteratorResult.done) {
      return;
    }
    const value = iteratorResult.value;

    if (value instanceof Promise) {
      value.then((res) => {
        handle(iterator.next(res));
      });
    }
  }

  try {
    handle(iterator .next());
  } catch (e) {
    console.log(e);
  }
}

async(generator);

结果如下

async，await关键字

使用await，async关键字可以将上面的代码修改,真的有方便很多,并且是使用同步语法来编写异步。哈哈哈哈。

async function generator() {
  try {
    const data1 = await getJSON({
      url:
        "https://www.dingshiyi.top:9002/article/get_articles?limit=8&page=1&type=1",
    });
    console.log(data1, "data1");

    const data2 = await getJSON({
      url:
        "https://www.dingshiyi.top:9002/article/get_articles?limit=8&page=1&type=1",
    });
    console.log(data2, "data2");
  } catch (err) {
    console.log(err);
  }
}
generator();

结果如下

今天的分享就到这里啦~~~

每天GET一些知识。