fetch(`./User.json`, { method: "get" })
.then(response => response.json())
.then(data =>
    data.results.forEach(result => (list.innerHTML  = template(result)))
)
.catch(error => console.log(error));

I want to add some json data. what's the solution. That's my code.

CodePudding user response：

Assuming you want all requests to complete, regardless of their response status, then Promise.allSettled() is an excellent choice

// handy "get" shortcut with error handling
const get = async (url) => {
  const res = await fetch(url) // "GET" is the default method
  if (!res.ok) {
    throw new Error(`${res.status}: ${await res.text()}`)
  }
  return res.json()
}

const urls = ["./Foo.json", "./Bar.json", "./Baz.json"]

Promise.allSettled(urls.map(get)).then(responses => {
  const data = responses
    .filter(({ status }) => status === "fulfilled")
    .map(({ value }) => value)
})

CodePudding user response：

You can use Promise.all method to get the values of the fetch calls once all the promises have resolved, you'd get the values in an array which you can destruct as shown below

    Promise.all([fetch(`./User.json`, { method: "get" }).then(response => response.json())]), fetch(`./Products.json`, { method: "get" }).then(response => response.json())]).then([users, products]=>
    users.results.forEach(result => (list.innerHTML  = template(result)))
)

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>