登录
目录
当前位置： 首页 > 文档资料 > 写给不耐烦的 JavaScript 程序员 >

37.异步编程的 Promise

优质
小牛编辑
126浏览
2023-12-01

在本章中，我们将探索 Promise，另一种交付异步结果的模式。

本章建立在前一章的基础上，以JavaScript异步编程为背景。

37.1. 使用 Promise 的基础知识

Promise 是一种交付异步结果的模式。

37.1.1. 使用基于 Promise 的函数

以下代码是使用基于 Promise 的函数addAsync()的示例（其实现将很快会被展示）：

addAsync(3, 4)
  .then(result => { // success
    assert.equal(result, 7);
  })
  .catch(error => { // failure
    assert.fail(error);
  });

Promise 结合了回调模式和事件模式的各个方面：

  • 与回调模式一样，Promise 专注于提供一次性结果。

  • 与某些事件模式类似，一个基于 Promise 的函数通过返回一个对象（ Promise ）来传递其结果。使用该对象，你可以注册处理结果（.then()）和错误（.catch()）的回调。

  • Promise 的一个独特之处在于你可以串联.then()和.catch()，因为它们都返回 Promise。这有助于顺序调用多个异步函数。我们稍后将探讨其详情。

37.1.2. 什么是 Promise？

那么什么是 Promise？有两种方式来看待它：

  • 一方面，它是最终要被交付结果的一个占位符或容器。
  • 另一方面，它是一个可以注册监听器的对象。

37.1.3. 实现基于 Promise 的函数

这是你如何实现一个基于 Promise 的关于两个数字x和y相加的函数：

function addAsync(x, y) {
  return new Promise(
    (resolve, reject) => { // (A)
      if (x === undefined || y === undefined) {
        reject(new Error('Must provide two parameters'));
      } else {
        resolve(x + y);
      }
    });
}

使用这种返回 Promise 的方式，addAsync()立即调用Promise构造函数。该函数的实际实现存在于传递给该构造函数的回调中（行 A）。该回调被提供了两个方法：

  • resolve用于传递结果（如果成功）。
  • reject用于传递错误（如果失败）。

37.1.4. Promise 的状态

Figure 21: A Promise can be in either one of three states: pending, fulfilled, or rejected. If a Promise is in a final (non-pending) state, it is called settled.

图 21: 一个 Promise 可以处于三种状态中的任何一种: pending（待定）, fulfilled(已履行), 或 rejected（被拒绝）. 如果一个 Promise 处于最终 (non-pending 非待定) 状态, 则称为 settled（已结算） .

图 21 描述了 Promise 可以进入的三种状态. Promise 专注于一次性结果并保护您免受 竞态条件（过早注册或太晚注册）：

  • 如果您过早注册.then()回调或.catch()回调，则会在 Promise 结算后被通知。
  • 一旦一个 Promise 被结算了，其结算值（结果或错误）会被缓存。因此，如果在结算后调用.then()或.catch()，它们将收到被缓存的值。

此外，一旦 Promise 得到结算，其状态和结算值就不能再改变了。这有助于使代码变得可预测，并加强了 Promise 的一次性特性。

接下来，我们将看到更多创建 Promise 的方法。

37.1.5. Promise.resolve()：创建一个被给定值履行的 Promise

Promise.resolve(x)创建一个使用值x实现的 Promise：

Promise.resolve(123)
.then(x => {
  assert.equal(x, 123);
});

如果参数已经是一个 Promise，则返回是不变：

const abcPromise = Promise.resolve('abc');
assert.equal(
  Promise.resolve(abcPromise),
  abcPromise);

因此，给定任意值x，您可以使用Promise.resolve(x)确保您拥有一个 Promise。

请注意，函数名称是resolve，而不是fulfill，因为如果参数是一个被拒绝的 Promise，.resolve()会返回被拒绝的 Promise。

37.1.6. Promise.reject()：创建一个被给定值拒绝的 Promise

Promise.reject(err)创建一个使用值err实现的 Promise：

const myError = new Error('My error!');
Promise.reject(myError)
.catch(err => {
  assert.equal(err, myError);
});

37.1.7. 在.then()回调中返回或抛出

.then()处理 Promise 的履行。它返回一个新鲜的 Promise。这个 Promise 是如何达成的取决于回调中发生了什么。我们来看看三种常见情况。

37.1.7.1. 返回一个非 Promise 值

首先，回调可以返回一个非 Promise 值（行 A）。因此，.then()返回的 Promise 满足该值（如 B 行所示）：

Promise.resolve('abc')
.then(str => {
  return str + str; // (A)
})
.then(str2 => {
  assert.equal(str2, 'abcabc'); // (B)
});
37.1.7.2. 返回一个 Promise

其次，回调可以返回一个 Promise p（行 A）。因此，p“成为”.then()返回的内容（.then()已经返回的 Promise 实际上被p替换）。

Promise.resolve('abc')
.then(str => {
  return Promise.resolve(123); // (A)
})
.then(num => {
  assert.equal(num, 123);
});
37.1.7.3. 抛出异常

第三，回调可以抛出异常。因此，.then()返回的 Promise 被该异常拒绝。也就是说，同步错误被转换为异步错误。

const myError = new Error('My error!');
Promise.resolve('abc')
.then(str => {
  throw myError;
})
.catch(err => {
  assert.equal(err, myError);
});

37.1.8. .catch()及其回调

.then()和.catch()之间的唯一区别是后者是由拒绝而不是履行触发的。但是，这两种方法都以相同的方式将其回调的操作转换为 Promise。例如，在以下代码中，行 A 中.catch()回调返回的值将成为履行值：

const err = new Error();

Promise.reject(err)
.catch(e => {
  assert.equal(e, err);
  // Something went wrong, use a default value
  return 'default value'; // (A)
})
.then(str => {
  assert.equal(str, 'default value');
});

37.1.9. 串联方法调用

由于.then()和.catch()总是返回 Promise，您可以创建任意长度的方法调用链：

function myAsyncFunc() {
  return asyncFunc1()
  .then(result1 => {
    // ···
    return asyncFunc2(); // a Promise
  })
  .then(result2 => {
    // ···
    return result2 || '(Empty)'; // not a Promise
  })
  .then(result3 => {
    // ···
    return asyncFunc4(); // a Promise
  });
}

在某种程度上，.then()是同步分号的异步版本：

  • .then()是按顺序执行两个异步操作。
  • 分号是按顺序执行两个同步操作。

您还可以将.catch()添加到混合的方法调用链中，并让它同时处理多个错误源：

asyncFunc1()
.then(result1 => {
  // ···
  return asyncFunction2();
})
.then(result2 => {
  // ···
})
.catch(error => {
  // Failure: handle errors of asyncFunc1(), asyncFunc2()
  // and any (sync) exceptions thrown in previous callbacks
});

37.1.10. Promise 的优势

在处理一次性结果时，这些是 Promise 优于普通回调的一些优点：

  • 基于 Promise 的函数和方法的类型签名更清晰：如果函数是基于回调的，则某些参数是关于输入，而最后的一个或两个回调是关于输出。使用 Promise，与输出相关的所有内容都通过返回值处理。

  • 链式异步处理步骤更方便。

  • 错误处理可以负责同步和异步错误。

  • 编写基于 Promise 的函数稍微容易一些，因为您可以使用一些调用函数和处理结果的同步工具（例如.map()）。我们将在本章末尾看到一个例子。

  • Promise 是一个单一的标准，正逐渐取代几个互不相容的替代方案。例如，在 Node.js 中，许多函数现在都可以在基于 Promise 的版本中可用。新的异步浏览器 API 通常是基于 Promise 的。

Promise 最大的优势之一就是不直接使用它们：它们是 异步函数 的基础，一种用于执行异步计算的同步语法。异步函数将在下一章中介绍。

37.2. 范例

看到它们的使用有助于理解 Promise。我们来看看例子。

37.2.1. Node.js：异步读取文件

考虑以下带有 JSON 数据的文本文件person.json：

{
  "first": "Jane",
  "last": "Doe"
}

让我们看看两个版本的代码，它们读取这个文件并将其解析为一个对象。首先，基于回调的版本。第二，基于 Promise 的版本。

37.2.1.1. 基于回调的版本

以下代码读取此文件的内容并将其转换为 JavaScript 对象。它基于 Node.js 风格的回调：

import * as fs from 'fs';
fs.readFile('person.json',
  (error, text) => {
    if (error) { // (A)
      // Failure
      assert.fail(error);
    } else {
      // Success
      try { // (B)
        const obj = JSON.parse(text); // (C)
        assert.deepEqual(obj, {
          first: 'Jane',
          last: 'Doe',
        });
      } catch (e) {
        // Invalid JSON
        assert.fail(e);
      }
    }
  });

fs是用于文件系统操作的 Node.js 内置模块。我们使用基于回调的函数fs.readFile()来读取名称为person.json的文件。如果我们成功，内容将通过参数text作为字符串传递。在 C 行中，我们将该字符串从基于文本的数据格式 JSON 转换为 JavaScript 对象。 JSON是 JavaScript 标准库的一部分。

请注意，有两种错误处理机制：行 A 中的if负责fs.readFile()报告的异步错误，而行 B 中的try负责JSON.parse()报告的同步错误。

37.2.1.2. 基于 Promise 的版本

以下代码使用readFileAsync()，一个基于 Promise 的fs.readFile()版本（通过util.promisify()创建，稍后会解释）：

readFileAsync('person.json')
.then(text => { // (A)
  // Success
  const obj = JSON.parse(text);
  assert.deepEqual(obj, {
    first: 'Jane',
    last: 'Doe',
  });
})
.catch(err => { // (B)
  // Failure: file I/O error or JSON syntax error
  assert.fail(err);
});

函数readFileAsync()返回一个 Promise。在行 A 中，我们通过 Promise 的方法.then()指定成功的回调。 then回调中的剩余代码是同步的。

.then()返回一个 Promise，它允许在 B 行调用 Promise 方法.catch()。我们用它来指定一个失败的回调。

请注意，.catch()允许我们处理readFileAsync()的异步错误和JSON.parse()的同步错误。我们稍后会看到它究竟是如何工作的。

37.2.2. 浏览器：Promisifying（Promise化） XMLHttpRequest

我们以前见过基于事件的XMLHttpRequest API，用于在 Web 浏览器中下载数据。以下函数将Promise化 API：

function httpGet(url) {
  return new Promise(
    (resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.onload = () => {
        if (xhr.status === 200) {
          resolve(xhr.responseText); // (A)
        } else {
          // Something went wrong (404 etc.)
          reject(new Error(xhr.statusText)); // (B)
        }
      }
      xhr.onerror = () => {
        reject(new Error('Network error')); // (C)
      };
      xhr.open('GET', url);
      xhr.send();
    });
}

注意如何通过resolve()和reject()处理XMLHttpRequest的结果：

  • 一个成功的结果导致返回的 Promise 得以实现（行 A）。
  • 错误导致 Promise 被拒绝（B 行和 C 行）。

这是您使用httpGet()的方式：

httpGet('http://example.com/textfile.txt')
.then(content => {
  assert.equal(content, 'Content of textfile.txt\n');
})
.catch(error => {
  assert.fail(error);
});

练习：找出 Promise

exercises/promises/promise_timeout_test.js

37.2.3. Node.js：util.promisify()

util.promisify()是一个实用程序函数，它将基于回调的函数f转换为基于 Promise 的函数f。也就是说，我们将从这种类型的签名：

f(arg_1, ···, arg_n, (err: Error, result: T) => void) : void

对于这种类型的签名：

f(arg_1, ···, arg_n) : Promise<T>

以下代码Promise化了基于回调的fs.readFile()（行 A）并使用它：

import * as fs from 'fs';
import {promisify} from 'util';

const readFileAsync = promisify(fs.readFile); // (A)

readFileAsync('some-file.txt', {encoding: 'utf8'})
  .then(text => {
    assert.equal(text, 'The content of some-file.txt\n');
  })
  .catch(err => {
    assert.fail(err);
  });

练习：util.promisify()

  • 使用util.promisify()：exercises/promises/read_file_async_exrc.js
  • 自己实现util.promisify()：exercises/promises/my_promisify_test.js

37.2.4. 浏览器：Fetch API

所有现代浏览器都支持 Fetch，这是一种基于 Promise 的新 API，用于下载数据。可以把它想象成XMLHttpRequest的基于 Promise 的版本。以下是 API 的一段摘录：

interface Body {
  text() : Promise<string>;
  ···
}
interface Response extends Body {
  ···
}
declare function fetch(str) : Promise<Response>;

这意味着，你可以使用fetch()如下：

fetch('http://example.com/textfile.txt')
.then(response => response.text())
.then(text => {
  assert.equal(text, 'Content of textfile.txt\n');
});

练习：使用 fetch API

exercises/promises/fetch_json_test.js

37.3. 错误处理：不要混淆拒绝和异常

异步代码中错误处理的一般规则是：

不要混淆（异步）拒绝和（同步）异常

理由是，如果您可以使用单一的错误处理机制，那么您的代码就不那么冗余了。

唉，很容易意外地打破这个规则。例如：

// Don't do this
function asyncFunc() {
  doSomethingSync(); // (A)
  return doSomethingAsync()
  .then(result => {
    // ···
  });
}

问题是，如果在 行 A 抛出异常，那么asyncFunc()将抛出异常。该函数的调用者只会期待拒绝，并且不会为异常做好准备。我们可以通过三种方式解决此问题。

我们可以在try-catch语句中包装函数的整个主体，并在抛出异常时返回被拒绝的 Promise：

// Solution 1
function asyncFunc() {
  try {
    doSomethingSync();
    return doSomethingAsync()
    .then(result => {
      // ···
    });
  } catch (err) {
    return Promise.reject(err);
  }
}

鉴于.then()将异常转换为拒绝，我们可以在.then()回调中执行doSomethingSync()。为此，我们通过Promise.resolve()启动 Promise 链。我们忽略了最初的 Promise 的履行值undefined。

// Solution 2
function asyncFunc() {
  return Promise.resolve()
  .then(() => {
    doSomethingSync();
    return doSomethingAsync();
  })
  .then(result => {
    // ···
  });
}

最后，new Promise()还将异常转换为拒绝。因此，使用此构造函数与以前的解决方案类似：

// Solution 3
function asyncFunc() {
  return new Promise((resolve, reject) => {
    doSomethingSync();
    resolve(doSomethingAsync());
  })
  .then(result => {
    // ···
  });
}

37.4. 基于 Promise 的函数同步启动，异步解决

大多数基于 Promise 的函数执行如下：

  • 他们的执行立即开始，同步。
  • 但他们返回的 Promise 保证可以异步结算（如果有的话）。

以下代码演示了：

function asyncFunc() {
  console.log('asyncFunc');
  return new Promise(
    (resolve, _reject) => {
      console.log('Callback of new Promise()');
      resolve();
    });
}
console.log('Start');
asyncFunc()
.then(() => {
  console.log('Callback of .then()'); // (A)
});
console.log('End');

// Output:
// 'Start'
// 'asyncFunc'
// 'Callback of new Promise()'
// 'End'
// 'Callback of .then()'

我们可以看到new Promise()的回调在代码结束之前执行，而结果在稍后传递（行 A）。

这意味着您的代码可以依赖于运行到完成语义（如前一章中所述），并且串联的 Promise 不会匮乏其他任务的处理时间。

此外，此规则导致基于 Promise 的函数前后一致的异步地返回结果。不是有时立即，有时异步的。这种可预测性使代码更易于使用。有关更多信息，请参阅 Isaac Z. Schlueter 的“异步设计 API”。

37.5. Promise.all()：并发和 Promise 数组

37.5.1. 顺序执行与并发执行

请考虑以下代码：

const asyncFunc1 = () => Promise.resolve('one');
const asyncFunc2 = () => Promise.resolve('two');

asyncFunc1()
.then(result1 => {
  assert.equal(result1, 'one');
  return asyncFunc2();
})
.then(result2 => {
  assert.equal(result2, 'two');
});

使用.then()，基于 Promise 的函数始终顺序地执行：仅在asyncFunc1()的结果确定后，才会执行asyncFunc2()。

相反，辅助函数Promise.all()以更多并发的方式执行基于 Promise 的函数：

Promise.all([asyncFunc1(), asyncFunc2()])
.then(arr => {
  assert.deepEqual(arr, ['one', 'two']);
});

它的类型签名是：

Promise.all<T>(promises: Iterable<Promise<T>>): Promise<T[]>

参数promises是 Promise 的可迭代参数。结果是单个 Promise，其结算方式如下：

  • 如果满足所有输入 Promise，则输出 Promise 将通过一个履行值数组来实现。
  • 如果至少有一个输入 Promise 被拒绝，则输出 Promise 将被拒绝，并带有输入 Promise 的拒绝值。

换句话说：你从一个可变的 Promise 转到一个 Array 的 Promise。

37.5.2. 并发提示：关注计算何时开始

确定“并发”异步代码的方法的提示：关注异步计算何时开始，而不是如何处理 Promise。例如，以下使用.then()的代码与使用Promise.all()的版本一样“并发”：

const promise1 = asyncFunc1();
const promise2 = asyncFunc2();

promise1
.then(result1 => {
  assert.equal(result1, 'one');
  return promise2;
})
.then(result2 => {
  assert.equal(result2, 'two');
});

asyncFunc1()和asyncFunc2()大致同时开始。一旦两个 Promise 都满足，两个.then()调用几乎立即执行。如果首先满足promise1，这种方法甚至比使用Promise.all()（等待所有 Promise 都满足）更快。

37.5.3. Promise.all()是 fork-join

Promise.all()与并发模式“fork join”松散相关。例如：

Promise.all([
  // Fork async computations
  httpGet('http://example.com/file1.txt'),
  httpGet('http://example.com/file2.txt'),
])
// Join async computations
.then(([text1, text2]) => {
  assert.equal(text1, 'Content of file1.txt\n');
  assert.equal(text2, 'Content of file2.txt\n');
});

37.5.4。通过Promise.all()异步.map()

诸如.map()，.filter()等的数组变换方法用于同步计算。例如：

function timesTwoSync(x) {
  return 2 * x;
}
const arr = [1, 2, 3];
const result = arr.map(timesTwoSync);
assert.deepEqual(result, [2, 4, 6]);

.map()的回调是否可能是基于 Promise 的函数？是的，如果你使用Promise.all()将一个 Promise 数组转换为一个（履行）值数组：

function timesTwoAsync(x) {
  return new Promise(resolve => resolve(x * 2));
}
const arr = [1, 2, 3];
const promiseArr = arr.map(timesTwoAsync);
Promise.all(promiseArr)
.then(result => {
  assert.deepEqual(result, [2, 4, 6]);
});
37.5.4.1。一个更现实的例子

下面的代码是一个更现实的例子：我们使用.map()将示例从 fork-join 部分转换为一个函数，其参数是一个带有要下载的文本文件 URL 的 Array。

function downloadTexts(fileUrls) {
  const promisedTexts = fileUrls.map(httpGet);
  return Promise.all(promisedTexts);
}

downloadTexts([
  'http://example.com/file1.txt',
  'http://example.com/file2.txt',
])
.then(texts => {
  assert.deepEqual(
    texts, [
      'Content of file1.txt\n',
      'Content of file2.txt\n',
    ]);
});

练习：Promise.all()和列表文件

exercises/promises/list_files_async_test.js

37.6. 串联 Promise 的提示

本节提供了串联 Promise 的提示。

37.6.1. 串联错误：失去尾巴

问题：

// Don't do this
function foo() {
  const promise = asyncFunc();
  promise.then(result => {
    // ···
  });

  return promise;
}

计算从asyncFunc()返回的 Promise 开始。但之后，计算继续，并通过.then()创建另一个 Promise。 foo()返回前 Promise，但应返回后者。这是如何解决它：

function foo() {
  const promise = asyncFunc();
  return promise.then(result => {
    // ···
  });
}

37.6.2. 串联错误：嵌套

问题：

// Don't do this
asyncFunc1()
.then(result1 => {
  return asyncFunc2()
  .then(result2 => { // (A)
    // ···
  });
});

行 A 中的.then()是嵌套的。扁平结构会更好：

asyncFunc1()
.then(result1 => {
  return asyncFunc2();
})
.then(result2 => {
  // ···
});

37.6.3. 串联错误：多余的嵌套

这是可避免嵌套的另一个例子：

// Don't do this
asyncFunc1()
.then(result1 => {
  if (result1 < 0) {
    return asyncFuncA()
    .then(resultA => 'Result: ' + resultA);
  } else {
    return asyncFuncB()
    .then(resultB => 'Result: ' + resultB);
  }
});

我们可以再次获得扁平结构：

asyncFunc1()
.then(result1 => {
  return result1 < 0 ? asyncFuncA() : asyncFuncB();
})
.then(resultAB => {
  return 'Result: ' + resultAB;
});

37.6.4. 嵌套本身并不邪恶

在以下代码中，我们受益于 不是 嵌套：

db.open()
.then(connection => { // (A)
  return connection.select({ name: 'Jane' })
  .then(result => { // (B)
    // Process result
    // Use `connection` to make more queries
  })
  // ···
  .catch(error => {
    // handle errors
  })
  .finally(() => {
    connection.close(); // (C)
  });
})

我们在 行 A 接收异步结果。在 B 行中，我们正在嵌套，因此我们可以在回调内和 C 行中访问变量connection。

37.6.5. 串联错误：创建 Promise 而不是串联

问题：

// Don't do this
class Model {
  insertInto(db) {
    return new Promise((resolve, reject) => { // (A)
      db.insert(this.fields)
        .then(resultCode => {
          this.notifyObservers({event: 'created', model: this});
          resolve(resultCode);
        }).catch(err => {
          reject(err);
        })
    });
  }
  // ···
}

在 行 A 中，我们创建了一个 Promise 来提供db.insert()的结果。这是不必要的冗长，可以简化：

class Model {
  insertInto(db) {
    return db.insert(this.fields)
    .then(resultCode => {
      this.notifyObservers({event: 'created', model: this});
      return resultCode;
    });
  }
  // ···
}

关键的想法是我们不需要创造一个 Promise;我们可以返回.then()调用的结果。另一个好处是我们不需要捕获并重新拒绝db.insert()的失败。我们只是将其拒绝传递给.insertInto()的调用者。

37.7. 进一步阅读

免责声明： 以上内容版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。感谢每一位辛勤著写的作者，感谢每一位的分享。
@小牛知识库 xnip.cn