显示错误消息并在承诺中返回 null

Question

我如何在控制台中显示错误并在iif的第二部分中返回值，如下所示：return fetch(templatePath)  .then((response) => response.ok ? response.text() : function() {    console.error(`Template ${templatePath} not found.`);    Promise.resolve(null);  })  .then((templateHtml) => {    newElement.innerHTML = templateHtml;    while (newElement.firstChild) {      oldElement.appendChild(newElement.firstChild);    }  })但这会将函数显示为字符串，而不是像我想要的那样继续使用 null。

Answer 1

脚本中有 2 个错误：

1. 是一个匿名函数，它不被调用，只是声明，function()

2. 匿名函数未返回声明的承诺Promise.resolve(null);

溶液：

return fetch(templatePath)

  .then((response) => {

    if (response.ok) return response.text();

    console.error(`Template ${templatePath} not found.`);

    return null;

  })

  .then(...

Answer 2

您不必创建函数，只需使用逗号运算符 （），该运算符计算两个操作数，并返回最后一个：,

return fetch(templatePath)

  .then(

    (response) => response.ok ? response.text() : (console.error(`Template ${templatePath} not found.`), null)

  )

  .then((templateHtml) => {

    newElement.innerHTML = templateHtml;

    while (newElement.firstChild) {

      oldElement.appendChild(newElement.firstChild);

    }

  })

但是，如果发生错误，建议拒绝承诺：

return fetch(templatePath)

  .then(

    (response) => response.ok ? response.text() : Promise.reject(new Error(`Template ${templatePath} not found.`))

  )

  .then((templateHtml) => {

    newElement.innerHTML = templateHtml;

    while (newElement.firstChild) {

      oldElement.appendChild(newElement.firstChild);

    }

  })

Answer 3

如果出现错误，则不返回函数，只需返回 null。

每个块返回一个承诺。当您返回不是 promise 的内容时，从传递给函数的回调函数，函数返回的 promise 将在回调函数返回时解析，并立即使用回调函数返回的非 promise 值实现。thenthenthen

在您的例子中，如果发生错误，第一个函数调用返回的承诺将以 的值实现。thennull

如果传递给函数的回调函数的返回值本身就是一个 promise，则函数调用返回的 promise 将被解析但尚未结算。仅当回调函数返回的 promise 已解决时，它才会结算。thenthen

在您的情况下，如果为 true，回调函数将返回 promise 。函数调用返回的承诺将被解析，但只有在此承诺结算后才会结算。response.okresponse.textthenresponse.text

return fetch(templatePath)

  .then((response) => {

    if (response.ok) return response.text();

     console.error(`Template ${templatePath} not found.`);

     return null;

  })

  .then((templateHtml) => {

    newElement.innerHTML = templateHtml;

    while (newElement.firstChild) {

      oldElement.appendChild(newElement.firstChild);

    }

  })

Answer 4

明白了

return fetch(templatePath)

  .then((response) => {

    if (response.ok) {

      return response.text();

    }

    else {

      console.error(`Template ${templatePath} not found.`);

      return Promise.resolve(null);

    }

  })

  .then((templateHtml) => {

    newElement.innerHTML = templateHtml;

    while (newElement.firstChild) {

      oldElement.appendChild(newElement.firstChild);

    }

  })