链式获取承诺（JSON、React、Webpack、NodeJS）

Question

我需要获取某些内容 10 次，并且 return 每个请求的 JSON 并将其推送到状态。大部分的抓取工作，但会在中途减速并在完成前停止。承诺似乎接受 'cors' 响应，而不是实际的 json，因此会过早触发。

此外，我不喜欢为了更改偏移量而必须重复相同的代码很多次，但我花了几个小时摆弄 for 循环并卡住了，所以如果你们可以提出建议更好的方法来做到这一点真是太棒了。

代码如下：

function FetchAll(API_KEY, CX, query, E, that, pushState){

    fetch(`https://www.googleapis.com/youtube/v3/channels?part=contentDetails&id=${E.target.value}&key=${API_KEY}`, {
      method: 'get',
      headers : { 
        'Content-Type': 'application/json',
        'Accept': 'application/json'
       }
    }).then(function(response){
      return response.json()
    }).then(function(uploads){
        console.log(uploads)
      return fetch(`https://www.googleapis.com/youtube/v3/playlistItems?playlistId=${uploads.items[0].contentDetails.relatedPlaylists.uploads}&key=${API_KEY}&part=snippet&maxResults=50`)
    }).then(response => {
      return response.json()
    }).then(function(data){
        console.log(data)
      that.setState({yt:data})
    }).then(function(){
      return fetch(`https://www.googleapis.com/customsearch/v1?key=${API_KEY}&num=10&cx=${CX}&q=${query}&start=`)
    }).then(function(response){
      return response.json();
    }).then(r => pushState(r))
    .then(function(){
      return fetch(`https://www.googleapis.com/customsearch/v1?key=${API_KEY}&num=10&cx=${CX}&q=${query}&start=`)
    }).then(function(response){
      return response.json();
    }).then(r => pushState(r))
    .then(function(){
      return fetch(`https://www.googleapis.com/customsearch/v1?key=${API_KEY}&num=10&cx=${CX}&q=${query}&start=`)
    }).then(function(response){
      return response.json();
    }).then(r => pushState(r))
    .then(function(){
      return fetch(`https://www.googleapis.com/customsearch/v1?key=${API_KEY}&num=10&cx=${CX}&q=${query}&start=`)
    }).then(function(response){
      return response.json();
    }).then(r => pushState(r))
    .then(function(){
      return fetch(`https://www.googleapis.com/customsearch/v1?key=${API_KEY}&num=10&cx=${CX}&q=${query}&start=`)
    }).then(function(response){
      return response.json();
    }).then(r => pushState(r))
    .then(function(){
      return fetch(`https://www.googleapis.com/customsearch/v1?key=${API_KEY}&num=10&cx=${CX}&q=${query}&start=`)
    }).then(function(response){
      return response.json();
    }).then(r => pushState(r))
    .then(function(){
      return fetch(`https://www.googleapis.com/customsearch/v1?key=${API_KEY}&num=10&cx=${CX}&q=${query}&start=`)
    }).then(function(response){
      return response.json();
    }).then(r => pushState(r))
    .then(function(){
      return fetch(`https://www.googleapis.com/customsearch/v1?key=${API_KEY}&num=10&cx=${CX}&q=${query}&start=`)
    }).then(function(response){
      return response.json();
    }).then(r => pushState(r))
    .then(function(){
      return fetch(`https://www.googleapis.com/customsearch/v1?key=${API_KEY}&num=10&cx=${CX}&q=${query}&start=`)
    }).then(function(response){
      return response.json();
    }).then(r => pushState(r))
    .then(function(){
      return fetch(`https://www.googleapis.com/customsearch/v1?key=${API_KEY}&num=10&cx=${CX}&q=${query}&start=`)
    }).then(function(response){
      return response.json();
    }).then(r => pushState(r))
    .then(function(){
      return fetch(`https://www.googleapis.com/customsearch/v1?key=${API_KEY}&num=10&cx=${CX}&q=${query}&start=${101}`)
    }).then(function(response){
      return response.json();
    }).then(r => pushState(r))

}

export default FetchAll

以防万一，FetchAll 在主 App.js 文件中被调用，所有内容都在参数中发送给它。

这是 pushState（如果需要）

FetchAll(API_KEY, CX, query, e, that,
    (r) => {
      console.log(r)
      let c = that.state.compareRaw
      c.push(r)
      that.setState({
        compareRaw: c
      })
    }
    )
}

'that' is a reference to 'this'

非常感谢任何帮助或提示。谢谢！

Answer 1

首先判断哪些请求是瀑布请求，哪些请求是并行请求。

在瀑布模型中，当前请求依赖于先前的请求结果，并使用排序 .then() 函数处理

在并行模型中，请求是独立的，可以同时触发。它可以用 bluebird 作为 promises 的一个很好的帮助工具来解决。

const Promise = require('bluebird');
Promise.all([fetch(...), fetch(...)...., fetchN(...)], 
            (result1, result2, result3 ..., resultN) => {
              //handle results
            })

您始终可以将 api 调用包装在一个函数中：

function search(start, limit) {
    return fetch(`https://www.googleapis.com/customsearch/v1?key=${API_KEY}&num=${limit}&cx=${CX}&q=${query}&start=${start}`)  
}

大家在一起

fetch(...) // request 1
.then((response) => fetch(...)) // request 2
.then((response) => {
   const apiCalls = [];
   for let i = 0; i < 10; i++ {
      apiCalls.push( search(i*10+1, 10) );
   }
   return Promise.all(apiCalls);
})
.then((...results) => {
   // handle search results
})

希望对您有所帮助。

链式获取承诺（JSON、React、Webpack、NodeJS）

Chained Fetch Promises (JSON, React, Webpack, NodeJS)

javascript

fetch

node.js

reactjs