チェーンフェッチの約束（JSON、React、Webpack、NodeJS）

Question

Hey all。

私は何か10回取り出して、各要求の.JSONを返し、それをStateにプッシュする必要があります。 ほとんどのフェッチは機能しますが、完了する前に半分ほど遅くなり、停止します。 約束は、実際のjsonではなく「cors」応答を受け入れているように見え、早期にトリガーします。

また、オフセットを変更するために同じコードを何度も繰り返す必要があるのが好きではありませんが、forループを使って時間を費やしてしまいました。これを行う方法はawesomeです。

は、ここでは、コードです：あなたはwoneringた場合

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 

、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で解決できます。あなたは、常に機能でAPI呼び出しをラップすることができます

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

：

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

はそれがお役に立てば幸いです。