API url 的问题：似乎无法正确传递参数

Question

我是 API 新手，我第一次尝试使用 Flickr API 创建画廊，但我真的很难让它正常工作。

我已经正确创建了 url，如果我直接在 url 中插入搜索参数，当我控制台日志时，我可以看到正确的图像列表。 当我尝试将参数从变量传递到 url 时，会出现此问题。 并且错误以两种不同的方式表现出来，具体取决于我是将 url 变量放在参数变量之前还是之后。

情况1：

var url = `https://www.flickr.com/services/rest/?method=flickr.photos.search&api_key=XXXXXXXXXXXXXX&text=${searchWord}&per_page=${perPage}&page=${page}&format=json&nojsoncallback=1`;
var searchWord = document.getElementById('input').value;
var perPage = 50;
var page = 1;

在这种情况下，它将控制台日志数据，但使用其选择的参数。

案例二：

var searchWord = document.getElementById('input').value;
var perPage = 50;
var page = 1;
var url = `https://www.flickr.com/services/rest/?method=flickr.photos.search&api_key=XXXXXXXXXXXXXX&text=${searchWord}&per_page=${perPage}&page=${page}&format=json&nojsoncallback=1`;

在这种情况下，它将返回以下错误消息： {stat: "fail", code: 3, message: "Parameterless search has been disabled. 请改用 flickr.photos.getRecent。"}

我似乎没有正确地将参数传递给 url，因为我在尝试创建画廊本身时也遇到了问题，当我尝试将 API 数组中的图像中的必要 ID 传递给图像 Z572114E421E5E0D8我正在创建，这些参数最终是未定义的。

这是我写的代码：

function createGallery(photos) {

    for (let photo of Object.keys(photos)) {
        const imgElem = document.createElement('li');
        imgElem.innerHTML = `<img src='https://farm{${photo.farm}}.staticflickr.com/{${photo.server}}/{${photo.id}}_{${photo.secret}}_[mstzb].jpg'></img>`;
        imgElem.setAttribute('img-id', photo.id);
        gallery.append(imgElem);
    }
}

只是为了概述，这是我的 JS 的最后一点：

//Fetch API
async function start() {
    const response = await fetch (url)
    const data = await response.json()
    console.log(data)
    createGallery(data)
}


//Call functions
search()

这是我的 HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <main>
        <input type="text" id="input">
        <button id="search">Go</button>

        <ul id="gallery"></ul>
        
    </main>

    <script src="script.js"></script>
</body>
</html>

任何人都可以解释我做错了什么？ 提前非常感谢:)

编辑：我尝试使用加号而不是使用模板文字来附加变量，如下所示：

var url = 'https://www.flickr.com/services/rest/?method=flickr.photos.search&api_key=XXXXXXXXXXXXXX&text='+searchWord+'&per_page='+perPage+'&page='+page+'&format=json&nojsoncallback=1';

但两种方式都给出完全相同的结果。

Answer 1

您基本上是错误地附加了参数。

您有以下内容：

var perPage = 50;
var page = 1;
var url = `https://www.flickr.com/services/rest/?method=flickr.photos.search&api_key=XXXXXXXXXXXXXX&text=${searchWord}&per_page=${perPage}&page=${page}&format=json&nojsoncallback=1`;

当您定义 url 时，它应该与此类似。

var url = `https://www.flickr.com/services/rest/?method=flickr.photos.search&api_key=XXXXXXXXXXXXXX&text=' + searchWord + '&per_page=' + perPage + '&page=' + page + '&format=json&nojsoncallback=1'

请注意那里的区别，我们实际上只是通过将 JS 变量附加到字符串来构建 url var。 没有 ${} 访问声明的页面和 perPage JS 变量...