在 React 中使用 fetch 加载多个 URLS JSON

Question

我正在尝试使用 Promise.all() 方法在 React.js 中获取多个 URL，我该怎么做？

所以我从另一个堆栈论坛获得了这段代码。我需要获取所有 urls 列表，比如 json，并传递到一个名为“SetBusStop”的状态：

const requests = urls.map(url => 
fetch(url).then(res => res.json()));
 const toBus = responses => 
 responses.map(response => response);
  Promise.all(requests).then(toBus)
 .then(positions => {setBusStop(positions)); 

这些是 const url 链接：

   "https://aiko-olhovivo-proxy.aikodigital.io/Parada/BuscarParadasPorCorredor?codigoCorredor=8",
   "https://aiko-olhovivo-proxy.aikodigital.io/Parada/BuscarParadasPorCorredor?codigoCorredor=9",
   "https://aiko-olhovivo-proxy.aikodigital.io/Parada/BuscarParadasPorCorredor?codigoCorredor=3",
   "https://aiko-olhovivo-proxy.aikodigital.io/Parada/BuscarParadasPorCorredor?codigoCorredor=7",
   "https://aiko-olhovivo-proxy.aikodigital.io/Parada/BuscarParadasPorCorredor?codigoCorredor=1",
   "https://aiko-olhovivo-proxy.aikodigital.io/Parada/BuscarParadasPorCorredor?codigoCorredor=2",
   "https://aiko-olhovivo-proxy.aikodigital.io/Parada/BuscarParadasPorCorredor?codigoCorredor=10"
  ]; ```

I'm so stuck, thanks.

Answer 1

// Example urls
 const urls = [
  "https://jsonplaceholder.typicode.com/users/1",
  "https://jsonplaceholder.typicode.com/users/2",
  "https://jsonplaceholder.typicode.com/users/3",
];

const requests = urls.map((url) => fetch(url))

Promise.all(requests)
  .then((responses) => {  // Array of response object
    return Promise.all(responses.map(response => response.json()))  // converting response to json
  })
  .then((responsesData) => {  // actual array of data returned from response.json()
    setBusStop(responsesData)
  })


Result:
[
    {
        "id": 1,
        "name": "Leanne Graham",
        "username": "Bret",
        "email": "Sincere@april.biz",
        "address": {
        "street": "Kulas Light",
        "suite": "Apt. 556",
        "city": "Gwenborough",
        "zipcode": "92998-3874",
        "geo": { "lat": "-37.3159", "lng": "81.1496" }
        },
        "phone": "1-770-736-8031 x56442",
        "website": "hildegard.org",
        "company": {
        "name": "Romaguera-Crona",
        "catchPhrase": "Multi-layered client-server neural-net",
        "bs": "harness real-time e-markets"
        }
    },
    {
        "id": 2,
        "name": "Ervin Howell",
        "username": "Antonette",
        "email": "Shanna@melissa.tv",
        "address": {
        "street": "Victor Plains",
        "suite": "Suite 879",
        "city": "Wisokyburgh",
        "zipcode": "90566-7771",
        "geo": { "lat": "-43.9509", "lng": "-34.4618" }
        },
        "phone": "010-692-6593 x09125",
        "website": "anastasia.net",
        "company": {
        "name": "Deckow-Crist",
        "catchPhrase": "Proactive didactic contingency",
        "bs": "synergize scalable supply-chains"
        }
    },
    {
        "id": 3,
        "name": "Clementine Bauch",
        "username": "Samantha",
        "email": "Nathan@yesenia.net",
        "address": {
        "street": "Douglas Extension",
        "suite": "Suite 847",
        "city": "McKenziehaven",
        "zipcode": "59590-4157",
        "geo": { "lat": "-68.6102", "lng": "-47.0653" }
        },
        "phone": "1-463-123-4447",
        "website": "ramiro.info",
        "company": {
        "name": "Romaguera-Jacobson",
        "catchPhrase": "Face to face bifurcated interface",
        "bs": "e-enable strategic applications"
        }
    }
]

Answer 2

这是一个具有不同 URL 的有效 sn-p，因为我无权使用您的。也许这对您有帮助？

Promise.all(
  [1,2,3,7,8,9,10]
  .map(                   // collate an array of promises here ...
    i=>fetch('https://jsonplaceholder.typicode.com/users/'+i)
       .then(r=>r.json()) // set each promise to deliver a json
  )
).then(users=>console.log(users.map(u=>u.id+' '+u.name))); // process all results

请记住，Promise.all() 将“快速失败”，即。 e.一旦收到承诺数组中的一个拒绝，它将reject整个承诺。