链接获取承诺（JSON，React，Webpack，NodeJS）

Question

嘿，所有。

我需要抓取10次，然后返回每个请求的.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=${1}`) 
    }).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=${11}`) 
    }).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=${21}`) 
    }).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=${31}`) 
    }).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=${41}`) 
    }).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=${51}`) 
    }).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=${61}`) 
    }).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=${71}`) 
    }).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=${81}`) 
    }).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=${91}`) 
    }).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 

如果你wonering，使用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 
     }) 
    } 
    ) 
} 

'那个' 是参考 '这个'

任何帮助或尖端不胜感激。谢谢！

Answer 1

首先决定哪个请求是瀑布请求，哪些请求是并行请求。

在瀑布模型当前请求是依赖从以前的请求结果，并与测序处理.then()功能

在并行模型请求各自独立，可以所有火在同一时间。它可以通过bluebird作为promise的一个很好的帮手工具来解决。

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 
}) 

希望它能帮助。