已编辑

Question

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

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）


赋予价值


返回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'
});

P.S。我认为该代码通常将从使用lambda中受益。在我上面的示例中，这样会更好：

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

JavaScript函数返回的值未定义

问题

已编辑

1 个答案:

编辑