javascript - Promise 只是让异步代码同步吗？为什么不直接使用同步代码呢？

Question

如果我正在做类似的事情:

let request = require('request');

function download(link) {
    return new Promise((resolve, reject) => {
        request.get(link).end((err, res) => {
            resolve(res);
        }); 
    });
}

let link = 'http://google.com';
download(link).then((res) => {
    //do stuff with res
});

为什么不直接同步等待请求返回呢？为什么一开始就有这样的 promise 呢？

Answer 1

主要原因是，如果您要同步运行，则在处理同步请求时所有 Javascript 都会阻塞。这可能会导致浏览器“卡住”或以其他方式导致不良的用户体验，因此最好避免。

虽然有一些exceptions ，典型的 Javascript 有 single-threaded behavior :

Each message is processed completely before any other message is processed.

因此，如果您有一个同步耗时的操作(等待 AJAX 响应、打开本地文件，甚至只是一个缓慢的计算)，则在该操作完成之前不会运行 Javascript。您的页面甚至可能会卡住，导致浏览器或操作系统主动终止页面或应用程序。正如 MDN 文档 synchronous XMLHttpRequests 中所述，“由于对用户体验产生负面影响，主线程上的同步请求已被弃用。”

当然，同步代码更容易理解，即使存在上述所有陷阱:

// BAD: This will block while each request takes place,
// regardless of whether that's 10 milliseconds or 10 seconds.
var number1 = getFirstNumberSynchronouslyFromServer(url1);
var number2 = getSecondNumberSynchronouslyFromServer(url2);
display(number1 * number2);

在 ES6 中，处理这个问题最简单的方法是使用回调方法:

getFirstNumberAsynchronously(url1, function(number1) {
  getSecondNumberAsynchronously(url2, function(number2) {
    display(number1 * number2);
  });
});

但这会变得很棘手，特别是在涉及错误处理时，尤其是在尝试抽象出可能已经可用或可能需要另一个耗时的请求或计算的值时。 ES6 的 Promise 在很大程度上解决了这个问题:

var number1, number2;
getFirstNumberPromise().then(function(result) {
  number1 = result;
  return getSecondNumberPromise();
}).then(function(result) {
  number2 = result;
  return number1 * number2;
}).then(display).catch(handleError);

ES7 的 async/await 完成了这项工作，使异步版本像同步版本一样易于阅读/理解:

var number1 = await getFirstNumberPromise();
var number2 = await getSecondNumberPromise();
display(number1 * number2);

(事实上，上述所有示例都按顺序请求每个数字。使用 Promises.all，在基于 Promise 的示例中很容易并行执行此操作，而在嵌套回调、同步或伪同步示例中则要复杂得多。)