鏈接獲取承諾（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 
}) 

希望它能幫助。