WEB前端教程：异步编程 - Promise - 好学星城学习论坛

WEB前端教程：异步编程 - Promise

理解异步编程的基本概念，理解什么是异步

课程目标

理解异步编程的基本概念，理解什么是异步
学习 promise 基础知识

异步回调

在学习 promise 之前我们先要理解什么是回调地狱。因为正是为了解决回调地狱这一问题，promise 才出现了

阅读下面的文章，回顾什么是回调，以及回调地狱是什么

Promise

任务一

实现延时

用 Promise 封装实现延时函数 wait，使其效果和 setTimeout 函数一致。

/**
 * @param {number} milliseconds
 */
const sleep = (milliseconds) => {
  // your code here
};

//测试用例
sleep(2000).then(() => {
  //下面这句话会在执行了2s延时之后打印出来
  console.log("我延时了2s");
});

用 Promise 封装实现延时函数 randomSleep，该函数实现随机等待 1-10 秒

const randomSleep = () => {
  // your code here
};

//测试用例

console.log("STEP 1");
randomSleep().then(() => {
  // randomSleep（）函数执行完毕才打印 B
  console.log("STEP 2");
});
console.log("STEP 3");

打印结果如下：

STEP 1
STEP 3
STEP 2

编码二

使用 Promise 模拟数据获取.假设您需要获取北京的天气信息

完成该 fakeFetchWeather(endpoint) 函数，使其返回一个承诺

当 endpointis 为"beijing"时，它应该返回一个承诺，该承诺会在 1 秒后使用以下对象成功解析：

{
    city: "beijing",
    temperature: 2
}

对于所有其他端点，它应该返回一个失败的承诺。您还可以传递错误消息，例如："接口信息错误".

const fakeFetchWeather = (endpoint) => {
  // TODO: 实现模拟获取天气信息
};

// 测试用例
fakeFetchWeather("beijing")
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });
//{ city:"beijing", temperature: 2}

fakeFetch("Paris")
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });
//接口信息错误

编码三

按照要求实现 mergePromise 函数，把传进去的函数数组按顺序先后执行，并且把返回的数据先后放到数组 data 中。编写 JavaScript 代码，跑通如下测试用例

const timeout = (ms) =>
  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve();
    }, ms);
  });

const ajaxA = () =>
  timeout(2000).then(() => {
    console.log("A");
    return A;
  });

const ajaxB = () =>
  timeout(1000).then(() => {
    console.log("B");
    return B;
  });

const ajaxC = () =>
  timeout(2000).then(() => {
    console.log("C");
    return C;
  });

const mergePromise = (fetchArray) => {
  // 在这里实现你的代码
};

//测试用例
mergePromise([fakeFetchWeather(), fakeFetchWeather(), fakeFetchWeather()]).then(
  (data) => {
    console.log("done");
    console.log(data); // data 为 [A, B, C]
  }
);

// 要求分别输出
// A
// B
// C
// done
// [A, B, C]

提交

把你觉得此次学习中做得最好的代码放在 Github 后进行提交。

总结

依然把今天的学习用时，收获，问题进行记录。

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等

发表于 2022-11-02 10:59
阅读 ( 368 )
分类：WEB前端开发

WEB前端教程：异步编程 - Promise

课程目标

异步回调

Promise

任务一

编码二

编码三

提交

总结

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »