Question

在fetchAndDisplayUsers内，调用displayUsers之后，声明一个api varialble并将其值设置为https://randomapi.com/api/y1lfp11q?key=LEIX-GF3O-AG7I-6J84
使用浏览器的访存API对由api表示的API端点进行HTTP调用
fetch调用返回一个Promise，其中包含响应。在.then调用中使用箭头函数将响应转换为JSON。
在另一个.then调用中使用箭头函数，以接收转换后的JSON数据。箭头函数应解构其参数以获得结果属性。然后，函数主体应解构结果（数组）以获取第一项（API中的用户对象），该第一项应分配给用户变量。最后，它应该将用户对象添加到我们的用户数组中，然后使用包含新用户对象的内联数组调用displayUsers。
在提取调用中添加错误处理。

我希望此函数从api获取数据并显示它们

const fetchAndDisplayUsers =（）=> { users.push（{ 年龄：40岁重量：75，高度：6 国家：“尼日利亚”，名称：“ Charles Odili”， id：'dfhb454768DghtF' }）;

    users.push({
      age: 26,
      weight: 72,
      height: 6,
      country: 'Ugandan',
      name: 'Peter Odili',
      id: 'gydf4'
    });

    displayUsers(users);
        const api =  'https://randomapi.com/api/y1lfp11q?key=LEIX-GF3O-AG7I-6J84'
          fetch(api)
           .then(response => {
                 return response.json();
           })  
           .then(({results}) => {
            users = users.concat(results);
            displayUsers(users);
          }).catch(error => {
             console.log(error);
          })

    const displayUsers = (results) => {
       const selectItems = document.querySelector('.select-text');
        users.forEach(element => {
            console.log(element);
            const options = document.createElement("option");
            options.textContent = element.name;
            options.value = element.id;
            selectItems.appendChild(options);
        });
    };

Answer 1

const api =  'https://randomapi.com/api/y1lfp11q?key=LEIX-GF3O-AG7I-6J84'
fetch(api)
  .then(response => {
    return response.json();
  })  
  .then(({results}) => {
    const [ user ] = results;
    users.push(user);
    displayUsers([user]);
  })
  .catch(error => { console.log(error)})
};

获取和显示用户的详细信息

1 个答案: