Question

Web开发和学习Java的新手。

我一直在关注有关Promises的教程，以尝试了解它们的用途以及对它们有何用处，我遇到了以下代码：

var isMomHappy = true;

// Promise
var willIGetNewPhone = new Promise(
    function (resolve, reject) {
        if (isMomHappy) {
            var phone = {
                brand: 'Samsung',
                color: 'black'
            };
            resolve(phone);
        } else {
            var reason = new Error('mom is not happy');
            reject(reason);
        }

    }
);

//call our promise
var askMom = function () {
    willIGetNewPhone
        .then(function (fulfilled) {
            // yay, you got a new phone
            console.log(fulfilled);
        })
        .catch(function (error) {
            // ops, mom don't buy it
            console.log(error.message);
        });
}

askMom();

为什么在调用和处理Promise时需要.then（）方法？

我不仅可以执行以下操作吗？

var isMomHappy = false;

// Promise
var willIGetNewPhone = new Promise(
    function (resolve, reject) {
        if (isMomHappy) {
            var phone = {
                brand: 'Samsung',
                color: 'black'
            };
            resolve(phone);
            console.log(phone);
        } else {
            var reason = new Error('mom is not happy');
            reject(reason);
            console.log(reason.message);
        }

    }
)

willIGetNewPhone;

...因为这似乎可以重现相同的结果？

谢谢

斯图

Answer 1

then方法返回一个Promise，它允许方法链接。

如果该函数作为处理程序传递给，然后返回一个Promise，则等效的Promise将暴露给方法链中的下一个。

在docs上查看它以获取更多详细信息。

用一个非常简单的术语（说语言）：

去餐厅（承诺成功）
然后，放松一下。
如果不这样做（承诺失败）
然后，您会错过乐趣。

Answer 2

您的示例并不代表此处的真实交易。例如，当您处理需要首先加载的数据。

这是另一个例子（仍然是胡言乱语，而不是您实际做的100％）

const myPromise = new Promise((resolve) => {
  setTimeout(
    () => resolve('hello promise'),
    1000
  );
});

myPromise.then((data) => console.log(data));
console.log('This is called after then, yet it was executed before the promise resolved');

如您所见，您没有数据，但可以立即由诺言解决，但需要等待一秒钟。想象一下，您尝试从服务器获取数据。它不会立即可用。因此，您需要等到解决为止。

对于ES7，还有另一种语法可以使它更加清晰：async / await：

const myPromise = new Promise((resolve) => {
  setTimeout(
    () => resolve('hello promise'),
    1000
  );
});

const init = async() => {
  const data = await myPromise; // wait until promise has resolved
  console.log(data);
  console.log('Now the code flow is "correct" in the readers view')
};

init();

Answer 3

.then((result)=>{})要求将promise值传递到函数中。

您的诺言示例有点可怕，所以这是一个更相关的示例

    const doingStuff=new Promise(function(resolve, reject){
      setTimeout(function(){
         resolve('hello world');
      }, 10000);
    });
    
    doingStuff.then(function(result){
       console.log(result);
    });
    console.log('after hello world');

.then中的回调在超时结束时被调用。那是异步的。这也意味着您在超时中的函数不再是匿名的，如果出错，promise将清楚显示doingStuff promise错误。

如果运行此命令，控制台将显示

after hello world

hello world

向后，这是因为您的then在10秒后就跑了，即使它在代码中排在首位。

如果您尝试使用此代码，则错误将在解决之前发生。

    const doingStuff=new Promise(function(resolve, reject){
      setTimeout(function(){
         resolve('hello world');
      }, 10000);
      setTimeout(function(){
        reject(new Error('Something went wrong'));
      },5000);
    });
    
    doingStuff.then(function(result){
       console.log(result);
    });
    console.log('after hello world');

您的控制台日志将显示错误的确切位置。更好的是，您可以稍后处理错误，promise会保留该错误，直到您准备使用.catch(function(e){});。

        const doingStuff=new Promise(function(resolve, reject){
          setTimeout(function(){
             resolve('hello world');
          }, 10000);
          setTimeout(function(){
            reject(new Error('Something went wrong'));
          },5000);
        });
        
        doingStuff.then(function(result){
           console.log(result);
        }).catch(function(e){
          console.log('Error message:', e.message);
        });
        console.log('after hello world');

为什么您需要在JavaScript Promises中使用.then（）方法？

3 个答案: