用好 ES6 的 Promise 的三个场景及实际用法

前言

在 JavaScript 中，我们经常会遇到需要处理异步任务的情况，例如向服务器发送请求、读取文件、或者等待用户输入。在 ES6 之前，我们通常使用回调函数来处理这些异步任务，但是回调函数很容易导致代码混乱和难以维护。

ES6 引入了一个新的概念，用于更简单地处理异步任务：Promise。Promise 是一个对象，它表示一个异步操作的结果，这个结果可能是成功也可能是失败。我们可以使用 Promise 来处理异步任务，而无需使用回调函数。

Promise 的使用场景

Promise 有三个常见的使用场景：

1. 将异步操作包装成 Promise 对象

我们可以使用 Promise.resolve 来创建一个已完成的 Promise，也可以使用 Promise.reject 来创建一个失败的 Promise。

const promise1 = Promise.resolve(42);
const promise2 = Promise.reject(new Error('Something went wrong'));

2. 处理异步操作的结果

我们可以使用 Promise.then 来处理 Promise 的成功结果，也可以使用 Promise.catch 来处理 Promise 的失败结果。

promise1.then((result) => {
  console.log(result); // 42
});

promise2.catch((error) => {
  console.error(error); // Error: Something went wrong
});

3. 将多个异步操作组合在一起

我们可以使用 Promise.all 来将多个异步操作组合在一起，并等待所有操作都完成后再执行后续操作。

const promise3 = Promise.resolve(42);
const promise4 = Promise.reject(new Error('Something went wrong'));

Promise.all([promise3, promise4]).then((results) => {
  console.log(results); // [42, Error: Something went wrong]
});

实际用法

接下来，我们将通过一些实际代码示例来说明如何使用 Promise 来处理异步任务。

场景一：向服务器发送请求

function getServerData() {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://example.com/api/data');
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.responseText);
      } else {
        reject(new Error(xhr.statusText));
      }
    };
    xhr.onerror = () => {
      reject(new Error('Network error'));
    };
    xhr.send();
  });
}

getServerData().then((data) => {
  console.log(data);
}).catch((error) => {
  console.error(error);
});

场景二：读取文件

function readFile(path) {
  return new Promise((resolve, reject) => {
    const fs = require('fs');
    fs.readFile(path, 'utf8', (err, data) => {
      if (err) {
        reject(err);
      } else {
        resolve(data);
      }
    });
  });
}

readFile('file.txt').then((data) => {
  console.log(data);
}).catch((error) => {
  console.error(error);
});

场景三：等待用户输入

function getUserInput() {
  return new Promise((resolve) => {
    const readline = require('readline').createInterface({
      input: process.stdin,
      output: process.stdout
    });

    readline.question('What is your name? ', (name) => {
      readline.close();
      resolve(name);
    });
  });
}

getUserInput().then((name) => {
  console.log(`Hello, ${name}!`);
}).catch((error) => {
  console.error(error);
});

结语

Promise 是一个非常强大的工具，它可以帮助我们更简单地处理异步任务。通过使用 Promise，我们可以将异步操作包装成 Promise 对象，并使用 Promise.then 和 Promise.catch 来处理 Promise 的成功结果和失败结果。我们还可以使用 Promise.all 来将多个异步操作组合在一起，并等待所有操作都完成后再执行后续操作。