JavaScript 函数返回值未定义

Question

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

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>'

Issue

console.log(produImage)

giving value

返回产品图片

returning undefind

已编辑

也按照 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>`;

Please suggest me, how can I get plain result from getImage() that is returning promise object?

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);
}

注释:

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

如果您无法使用 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'
});

附注我认为代码通常会受益于使用 lambda。在我上面的例子中，这会更好:

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