[JavaScript知识库]ES6 - promise 与 async / await【Promise 封装丐版 Ajax】

什么是promise？（前言）

这只是一个promise精简版，并没有涵盖所有promise知识点 🚀

Promise其实就是一个对象，用来传递异步操作的消息，可以用来解决 回调地狱’的问题

Promise 对象用于表示一个异步操作的最终完成（或失败）及其结果值

Promise

常见回调地狱

这是回调地狱 🤔

ajax('http://www.test.com', 'get', () => {
  ajax('http://www.test.com', 'get', () => {
    ajax('http://www.test.com', 'get', () => {
      ajax('http://www.test.com', 'get', () => {
        ajax('http://www.test.com', 'get', () => {
          ajax('http://www.test.com', 'get', () => {});
        });
      });
    });
  });
});

这回调地狱真的是不好看啊 🤨

Pormise状态

• pending：初始状态
• fulfilled：操作成功-完成
• rejected：操作失败

如果异步操作成功的话，resolve方法将Promise对象的状态从未完成变为成功（pending => fulfilled）

如果异步操作失败，reject方法将Promise对象的状态从未完成变为失败（pending => rejected）

如果执行resolve方法，对应的会调用 then 方法，then方法传入一个函数作为参数，该函数的参数的值就是 resolve 方法的实参

如果执行 reject 方法，对应的会调用 catch 方法，catch方法传入一个函数作为参数，该函数的参数的值就是 reject 方法的实参

// const httpCode = 201;
const httpCode = 404;

const testPromise = new Promise((resolve, reject) => {
  // 使用异步 setTimeout模拟请求
  setTimeout(() => {
    if (httpCode === 201)
      return resolve('请求成功'); // 请求成功调用 resolve 函数
    else reject('请求失败'); // 请求失败
  }, 500);
});

testPromise
  .then(result => console.log(result)) // 请求成功 -- resolve
  .catch(err => console.log(err)); // 请求失败 -- reject

// 请求失败

使用 Promise 封装一个最简易的Ajax（丐版Ajax）

// 封装Ajax
const request = function (method, url, data) {
  const xhr = new XMLHttpRequest();
  return new Promise((resolve, reject) => {
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        // 服务器链接已经建立
        if (xhr.status === 200) {
          // 链接成功
          resolve(xhr.responseText);
        } else {
          reject(xhr.status);
        }
      }
    };
    xhr.open(method, url);
    xhr.send(data);
  });
};

//----------------------------//
request('get', 'http://127.0.0.1:5500/test.json')
  .then(result => console.log(result))
  .catch(err => console.log(err));

async \ await 玩转同步异步

上面我们尽管使用了Promise 解决了回调地狱的问题，但是并不是完美无缺的，如果接口是链式关联的，那么 Promise 的 then 方法里其实也是一个小型回调，维护起来不是特别的方便，这时就需要我们的ES6的 async 以及 await 了，不过准确来说这俩个是 ES8的

async 表示异步，await表示等待，所以 async 声明一个异步函数，await则用于等待一个异步函数或者方法的执行完毕

const stateCode = 201;

function getReq() {
  return new Promise((resolve, reject) => {
    // 模拟 ajax 请求
    setTimeout(() => {
      resolve({
        state: stateCode,
        mothod: 'GET',
        data: { name: 'Brave-AirPig', age: 22 },
      });
    }, 500);
  });
}

// 定义一个异步函数

async function getAsync() {
  const message = await getReq();
  console.log(message);
}

getAsync();