Question

我是JavaScript新手，但有一个问题：

我执行fetch('path')，然后分配值并返回它。后来我在其他函数中调用了此函数，但是它首先运行时带有空值，而无需等待分配值。我该如何解决？我认为我应该使用async和await，但不知道具体如何。

function loadLocalJson(path) {
let users = [];

fetch(path)
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok :(');
        }
        return response.json();
    })
    .then(results => {
        users = results
        console.log(users);
    }) 
    .catch(err => console.log('Error', err));

return users;
}

function getFilteredAndSortedArray(users, price) {
    console.log(users, price);
    return users.filter(user => {
        return user.salary && user.salary > price;
    })
    .sort(user => user.name);
}

users = loadLocalJson('users.json');
usersB= getFilteredAndSortedArray(users, 1000);
console.log(usersB, usersA);

// PrefixedUsersArray(users)    
// ...

Answer 1

您需要了解异步代码如何工作。提取请求会返回一个承诺，因此您必须返回该承诺并使用.then()访问该值：

function loadLocalJson(path) {
  return fetch(path)
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok :(');
      }
      return response.json();
    })
    .catch(err => console.log('Error', err))
}

function getFilteredAndSortedArray(users, price) {
  console.log(users, price);
  return users.filter(user => {
    return user.salary && user.salary > price;
  }).sort(user => user.name);
}

loadLocalJson('users.json').then(users => {
  usersB = getFilteredAndSortedArray(users, 1000);
  console.log(usersB, users);
})

您不必分配用户，您只需返回承诺，即已致电response.json()。另外，您的排序功能很可能无法正常工作，请尝试以下操作：

users.sort((a, b) => a.name.localeCompare(b.name))

如何等待提取json文件中的数据然后继续

1 个答案: