35. 异步编程的 Promise

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

• 与回调模式一样，Promise 专注于提供一次性结果。
• 与某些事件模式类似，一个基于 Promise 的函数通过返回一个对象（ Promise ）来传递其结果。使用该对象，你可以注册处理结果（.then()）和错误（.catch()）的回调。
• Promise 的一个独特之处在于你可以串联.then()和.catch()，因为它们都返回 Promise。这有助于顺序调用多个异步函数。我们稍后将探讨其详情。

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

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);
      }
    });
}

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

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

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

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

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

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

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

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

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');
});

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()是按顺序执行两个异步操作。
• 分号是按顺序执行两个同步操作。

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

• 基于 Promise 的函数和方法的类型签名更清晰：如果函数是基于回调的，则某些参数是关于输入，而最后的一个或两个回调是关于输出。使用 Promise，与输出相关的所有内容都通过返回值处理。
• 链式异步处理步骤更方便。
• 错误处理可以负责同步和异步错误。
• 编写基于 Promise 的函数稍微容易一些，因为您可以使用一些调用函数和处理结果的同步工具（例如.map()）。我们将在本章末尾看到一个例子。
• Promise 是一个单一的标准，正逐渐取代几个互不相容的替代方案。例如，在 Node.js 中，许多函数现在都可以在基于 Promise 的版本中可用。新的异步浏览器 API 通常是基于 Promise 的。

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

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);
      }
    }
  });

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);
});

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();
    });
}

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

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

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

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

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

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

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

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

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

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

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

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

• 他们的执行立即开始，同步。
• 但他们返回的 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()'

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');
});

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

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

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

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

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');
});

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

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]);
});

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

• 问题：

  // 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 => {
      // ···
    });
  }
  

• 问题：

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

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

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

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

  // 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;
  });
  

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

  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。

• 问题：

  // 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()的调用者。