Javascript学习笔记

1 异步Javascript

1.1 基于回调的异步

最基础的异步方式。

• 定时器

  一定时间后执行某个函数

  /**
   * param 1: function
   * param 2: delayed time (ms)
   */
  setTimeout(() => console.log('定时调用'), 5000);
  

  /**
  * setTimeout只调用一次回调函数
  * 如果要重复执行定时器，采用setInterval
  */
  let customIntervalId = setInterval(() => console.log('定时调用'), 1000);  // 每个1s调用一次
  setTimeout(() => clearInterval(customIntervalId), 5000);  // 5s后清除该setInterval
  

• 事件

  // eg: click事件
  let blockElement = xxx;
  blockElement.addEventListener('clike', yourCallBack());
  

1.2 Promise

一种为简化异步编程而设计的核心语言特性。（可以理解为Promise是一种简化的处理回调的方式。为什么需要简化：例如，普通回调方式如果出现多重嵌套回调）。

Promise是一个表示异步操作结果（完成/失败）的对象。Promise表示一次异步计算的未来结果。

Promise标准化了异步错误处理。

1.2.1 Promise基本使用

Promise具有三种状态：

1️⃣ pending

2️⃣ fulfilled

3️⃣ rejected

  flowchart TD
	A(pending) -->|resolve| B(fulfiled)
	A -->|reject| C(rejected)

1 创建Promise

构造函数Promise()接收一个函数作为唯一参数，使用该函数对创建的Promise进行控制，该函数接收两个参数（通常名为resolve和reject，均为函数）。

// 构造函数调用传入的函数，并为resolve和reject传入对应的函数值
const myPromise = new Promise((resolve, reject) => {
    // 异步执行逻辑...
    
    if (/*操作成功*/) {
        // 将 Promise 状态改为 fulfilled
        resolve(/*成功的返回结果*/);
    } else {
        // 将 Promise 状态改为 rejectes
        reject(/*失败的返回结果*/);                      
    }
});