ES6 - promise 与 async / await【Promise 封装丐版 Ajax】

2022-08-15
1

什么是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 解决了回调地狱的问题,但是并不是完美无缺的,如果接口是链式关联的,那么 Promisethen 方法里其实也是一个小型回调,维护起来不是特别的方便,这时就需要我们的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();

请添加图片描述

相关信息

    评论