JavaScript 函数返回值未定义

Question

我正在创建 Google Chrome 扩展程序，并在 background.js 中声明了一个函数，该函数正在访问 API，应该返回一个值，但它返回的是未定义的值。在返回语句有价值之前写控制台日志。

var produImage;

function getImage() {
    fetch('/api/images.json').then(
        function (response) {
            response.json().then(function (data) {
                var dataresponse=data.results;
                for (var obj = 0; obj < dataresponse.length; obj++)
                {
                  produImage=dataresponse[0].url_170x135;
                  //console.log writing value
                  console.log(produImage);
                  //returning undefind
                  return produImage;
                }
            });

        }
    );
}

//call to function
 '<td><img width="50" height="50" src="' + getImage() + '"/></td>'

问题

console.log(produImage)

赋予价值

返回产品图片

返回未定义

已编辑

也按照Chris的建议尝试过

function getImage() {
    return fetch('/api/images.json').then(
        function (response) {
            return response.json().then(
                function (data) {
                    ;
                    return data.results[0].url_170x135;
                }
            );
        }
    );
}

然后调用函数

 getImage().then(function (imageSrc) {
      const html = `<td><img width="50" height="50" src="${imageSrc}"/></td>`;
});

但我仍然无法将值连接到 var result 得到 undefined

我想这样连接：

result = `<tr>
<td>${How To concatenate Here}</td>
<td>${dResponse[obj].category_path}</td>
<td>${dResponse[obj].price}</td>
</tr>`;

请建议我，如何从返回 promise 对象的 getImage() 获得简单的结果？

Answer 1

你只是从最里面的函数返回，而不是从getImage。

为了更清楚，我将重写如下（希望这是正确的，用手机打字）：

async function getImage() {
  const response = await fetch('/api/images.json');

  const data = await response.json();

  return Promise.resolve(data.results[0].url_170x135);
}

注意事项：

• 您应该为此添加错误处理
• 您在那里的循环在原始代码中可能是合法的，但在您发布的内容中没有任何价值，恕我直言

如果您不能使用 async / await，以下应该可以工作：

function getImage() {
  return fetch('/api/images.json').then(
    function (response {
      return response.json().then(
        function (data) {;
          return data.results[0].url_170x135;
        }
      );
    }
  );
} 

编辑

当你解析函数的结果时，使用（在异步函数中）

const html = await `<td><img width="50" height="50" src="${getImage()}"/></td>`;

或（在非异步函数中）

getImage().then(function(imageSrc) {
  const html = `<td><img width="50" height="50" src="${imageSrc}"/></td>`;
  // do something with 'html'
});

附：我认为代码通常会从使用 lambdas 中受益。在我上面的例子中，这会更好：

getImage().then((imageSrc) => {
  const html = `<td><img width="50" height="50" src="${imageSrc}"/></td>`;
  // do something with 'html'
});