JS异步学习文档

JS异步学习文档

异步编程：就是执行一个长时间任务时，程序不需要进行等待，而是继续执行之后的代码，直到这些任务完成后再后来通知你，通常以回调函数（callback）的形式

优点：避免了程序的阻塞

箭头函数：就是流程的封装

// 传统函数表达式
var add = function(a, b) {
  return a + b;
};
// 箭头函数
const add = (a, b) => a + b;

// 单参数时可以省略圆括号
const double = x => x * 2;

// 没有参数的箭头函数
const sayHello = () => console.log('Hello!');

// 多条语句时需要花括号和return
const getRectangleArea = (width, height) => {
  const area = width * height;
  return area;
};

没有this，一般找this外层的this，不能用new调用 ，没有原型

括号里表示传进入了什么，箭头后表示经过了什么样的变化后返回什么

回调函数

一个简单的回调函数示例：

function greetUser(name, callback) {
  const greeting = `Hello, ${name}!`;
  callback(greeting);
}

function sayHello(greeting) {
  console.log(greeting);
}

greetUser("Alice", sayHello); // 输出: Hello, Alice!

在这个例子中，sayHello是一个回调函数，它被传递给greetUser函数，并在greetUser函数内部被调用。

proemise

一个 Promise 对象代表了一个异步操作的最终结果。它有三种状态：

1. Pending（进行中）：初始状态，既不是成功，也不是失败。
2. Fulfilled（已成功）：操作成功完成。
3. Rejected（已失败）：操作失败。

要创建一个 Promise，你需要使用 new Promise 构造函数，并提供一个执行器函数（executor function），它接受两个参数：resolve 和 reject。

• resolve：当异步操作成功时调用，它将 Promise 的状态从 pending 变为 fulfilled。

• reject：当异步操作失败时调用，它将 Promise 的状态从 pending 变为 rejected。

• const myPromise = new Promise((resolve, reject) => {
    // 异步操作
    const condition = true; // 假设这是一个异步操作的结果
    if (condition) {
      resolve('Promise is fulfilled');
    } else {
      reject('Promise is rejected');
    }
  });
  

resolve 和 reject 在 JavaScript 的 Promise 中是函数。

• resolve 函数：当异步操作成功完成时调用，它将 Promise 的状态从 pending 转变为 fulfilled，并传递一个值给后续的 .then() 方法中的回调函数。
• reject 函数：当异步操作失败时调用，它将 Promise 的状态从 pending 转变为 rejected，并传递一个错误值给后续的 .catch() 方法中的回调函数或者 .then() 方法中的第二个回调函数。

Promise 的 .then() 方法返回一个新的 Promise，这允许你进行链式调用。

myPromise
  .then((value) => {
    console.log(value);
    return 'Next step';
  })
  .then((nextValue) => {
    console.log(nextValue);
    throw new Error('Oops!');
  })
  .catch((error) => {
    console.error(error); // 输出：Oops!
  });

Promise.all()

当你有多个异步操作需要同时进行时，可以使用 Promise.all() 方法。它接受一个 Promise 数组作为参数，只有当所有 Promise 都成功时，才会解析。

Promise.all([promise1, promise2, promise3])
  .then((results) => {
    console.log(results); // [result1, result2, result3]
  })
  .catch((error) => {
    console.error(error);
  });

Promise.race()

与 Promise.all() 类似，Promise.race() 也接受一个 Promise 数组，但它会立即解析为第一个完成（无论成功还是失败）的 Promise。

fetch

是现代浏览器提供的用于执行 HTTP 请求的 API

它返回一个 Promise 对象。这意味着你可以使用 .then() 和 .catch() 方法来处理请求的成功和失败情况。

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    return response.json(); // 如果响应是JSON格式
  })
  .then(data => {
    console.log(data); // 请求成功的处理逻辑
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });

async await语法糖

async用于标记异步函数

await会等待promise执行完后直接返回最终的结果

await 只能用在异步函数中

使用 async/await 可以使异步代码看起来更像是同步代码，从而提高可读性

async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const data = await response.json(); // 解析JSON响应
    console.log(data); // 请求成功的处理逻辑
  } catch (error) {
    console.error('There has been a problem with your fetch operation:', error);
  }
}

fetchData('https://api.example.com/data');

以上