javascript - 如何等待获取json文件的数据然后继续

Question

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

我执行fetch('path')，然后分配值并返回它。后来我在其他函数中调用这个函数，但它首先以空值运行，而不等待分配值。我该如何解决这个问题？我认为我应该使用 async 和 await 但不知 Prop 体如何使用。

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

您需要了解异步代码的工作原理。获取请求返回一个 Promise，因此您必须返回 Promise 并使用 .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);
})

您不必分配用户，您只需返回 promise 即可，因为您已经调用了 response.json()。另外，您的排序功能很可能不起作用，请尝试如下操作:

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