尝试链接承诺Javascript时出现错误无法读取未定义的属性'then'答案

【问题标题】：Getting error Cannot read property 'then' of undefined when trying to chain promises Javascript尝试链接承诺Javascript时出现错误无法读取未定义的属性'then'
【发布时间】：2023-03-23 23:55:02
【问题描述】：

这是我的第一篇文章，如果我做错了，请见谅。

我正在尝试将 javascript 承诺链接在一起，但是当我运行它时，我收到错误 Uncaught TypeError: Cannot read property 'then' of undefined 在 script.js:108 （匿名）@script.js:108

你知道我做错了什么吗？

    const crates = {
    clothes: 8,
    hats: 20,
    toys: 50,
}

const orderToys = () => {
        new Promise((resolve, reject) => {
        if (crates.toys < 60){
            resolve('yes');
        } else {
            reject('no');
        }
    })
}

const sendMoney = (val) => {
        new Promise((resolve, reject) => {
        if(val === 'yes'){
            resolve('money sent');
        } else {
            reject('no order needed, do not sent money');
        }
    })
}

const orderConfirmed = (val) =>{
        new Promise((resolve, reject) => {
        if(val ==='money sent'){
            resolve('shipped');
        } else {
            reject('No money sent');
        }
    })
}

const delivered = (val) =>{
        new Promise((resolve, reject) => {
        if(val === 'shipped'){
            resolve('order completed');
        } else {
            reject('no order');
        }
    })
};

orderToys()
.then((firstVal) => {
    return sendMoney(firstval);
})
.then((secondVal) =>{
    return orderConfirmed(secondVal);
})
.then((thirdVal) =>{
    return delivered(thirdVal);
})
.then((fourthVal) =>{
    console.log(fourthVal);
})

【问题讨论】：

你需要return你的承诺

标签： javascript promise chaining

【解决方案1】：

要么返回承诺：

const orderToys = () => {
  return new Promise((resolve, reject) => {
    if (crates.toys < 60) {
      resolve('yes');
    } else {
      reject('no');
    }
  })
}

或者使用箭头函数的表达形式。

const orderToys = () =>
  new Promise((resolve, reject) => {
    if (crates.toys < 60) {
      resolve('yes');
    } else {
      reject('no');
    }
  });

【讨论】：

【解决方案2】：

你没有从函数中返回承诺。在尝试解决它们之前，您需要返回承诺。希望这会有所帮助。

const crates = {
    clothes: 8,
    hats: 20,
    toys: 50,
}

const orderToys = () => {
       return new Promise((resolve, reject) => {
        if (crates.toys < 60){
            resolve('yes');
        } else {
            reject('no');
        }
    })
}

const sendMoney = (val) => {
       return new Promise((resolve, reject) => {
        if(val === 'yes'){
            resolve('money sent');
        } else {
            reject('no order needed, do not sent money');
        }
    })
}

const orderConfirmed = (val) =>{
       return new Promise((resolve, reject) => {
        if(val ==='money sent'){
            resolve('shipped');
        } else {
            reject('No money sent');
        }
    })
}

const delivered = (val) =>{
      return  new Promise((resolve, reject) => {
        if(val === 'shipped'){
            resolve('order completed');
        } else {
            reject('no order');
        }
    })
};

orderToys()
.then((firstVal) => {
    return sendMoney(firstVal);
})
.then((secondVal) =>{
    return orderConfirmed(secondVal);
})
.then((thirdVal) =>{
    return delivered(thirdVal);
})
.then((fourthVal) =>{
    console.log(fourthVal);
})

【讨论】：

【解决方案3】：

如果您正在使用 Promises，那么您必须也返回该 Promise 以保留 Promise 链：

const crates = {
    clothes: 8,
    hats: 20,
    toys: 50,
};

const orderToys = () => {
    return new Promise((resolve, reject) => {
        if (crates.toys < 60) {
            resolve('yes');
        } else {
            reject('no');
        }
    });
};

const sendMoney = (val) => {
    return new Promise((resolve, reject) => {
        if (val === 'yes') {
            resolve('money sent');
        } else {
            reject('no order needed, do not sent money');
        }
    });
};

const orderConfirmed = (val) => {
    return new Promise((resolve, reject) => {
        if (val === 'money sent') {
            resolve('shipped');
        } else {
            reject('No money sent');
        }
    });
};

const delivered = (val) => {
    return new Promise((resolve, reject) => {
        if (val === 'shipped') {
            resolve('order completed');
        } else {
            reject('no order');
        }
    });
};

用法：

orderToys()
    .then((firstVal) => {
        return sendMoney(firstval);
    })
    .then((secondVal) => {
        return orderConfirmed(secondVal);
    })
    .then((thirdVal) => {
        return delivered(thirdVal);
    })
    .then((fourthVal) => {
        console.log(fourthVal);
    });

或者如果你需要使用 async-await 形式：

(async function () {
    try {
        const value1 = await orderToys();
        const value2 = await sendMoney(value1);
        const value3 = await orderConfirmed(value2);
        await delivered(value3);
    } catch (e) {
        // Handle errors
        console.log(e);
    }
})();

【讨论】：