Promiseに関連する記事を読んだところ、どうすればよいか理解できませんでしたPromise.allを介したAxiosを使用した複数のAPI呼び出し
3つのURLがあることを考慮して、次のように呼び出します。
let URL1 = "https://www.something.com"
let URL2 = "https://www.something1.com
let URL3 = "https://www.something2.com"
そして、Valueを格納する配列
let promiseArray = []
さて、これを並行して(Promise.all
)実行したいのですが、どのように実行するのかわかりませんか?なぜなら、axiosにはそれ自体に約束があるからです(少なくとも、それが私が使った方法です)。
axios.get(URL).then((response) => {
}).catch((error) => {
})
質問: promise.allとaxiosを使用して複数のリクエストを送信する方法を教えてください。
axios.get()
メソッドはpromiseを返します。
Promise.all()
にはプロミスの配列が必要です。例えば:
Promise.all([promise1, promise2, promise3])
じゃあ...
let URL1 = "https://www.something.com"
let URL2 = "https://www.something1.com"
let URL3 = "https://www.something2.com"
const promise1 = axios.get(URL1);
const promise2 = axios.get(URL2);
const promise3 = axios.get(URL3);
Promise.all([promise1, promise2, promise3]).then(function(values) {
console.log(values);
});
Promise.all()
の応答値がどのように見えるか疑問に思うかもしれません。それでは、この例を簡単に見てみると、簡単に理解できます。
var promise1 = Promise.resolve(3);
var promise2 = 42;
var promise3 = new Promise(function(resolve, reject) {
setTimeout(resolve, 100, 'foo');
});
Promise.all([promise1, promise2, promise3]).then(function(values) {
console.log(values);
});
// expected output: Array [3, 42, "foo"]
詳細: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
fetchData(URL)
関数は、ネットワーク要求を作成し、保留状態のpromiseオブジェクトを返します。
networkRequestPromises
には、getData関数から返された保留中のプロミスの配列が含まれます。
Promise.all
は、すべてのプロミスが解決されるか、プロミスが拒否されるまで待機します。約束を返し、応答の配列で解決します。
let URLs= ["https://jsonplaceholder.typicode.com/posts/1", "https://jsonplaceholder.typicode.com/posts/2", "https://jsonplaceholder.typicode.com/posts/3"]
async function getAllData(URLs){
let networkRequestPromises = URLs.map(fetchData);
return await Promise.all(networkRequestPromises);
}
function fetchData(URL) {
return axios
.get(URL)
.then(function(response) {
return {
success: true,
data: response.data
};
})
.catch(function(error) {
return { success: false };
});
}
getAllData(URLs).then(resp=>{console.log(resp)}).catch(e=>{console.log(e)})
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
承認済みの回答に追加するだけで、axiosにはPromise.all
という形式のaxios.all
もあり、約束のリストを期待し、応答の配列を返します。
let randomPromise = Promise.resolve(200);
axios.all([
axios.get('http://some_url'),
axios.get('http://another_url'),
randomPromise
])
.then((responses)=>{
console.log(responses)
})
promise.all
を使用して、渡されたプロミスの配列を使用し、すべてのプロミスが解決されるか、そのうちの1つが拒否されるのを待つことができます。
let URL1 = "https://www.something.com";
let URL2 = "https://www.something1.com";
let URL3 = "https://www.something2.com";
const fetchURL = (url) => axios.get(url);
const promiseArray = [URL1, URL2, URL3].map(fetchURL);
Promise.all(promiseArray)
.then((data) => {
data[0]; // first promise resolved
data[1];// second promise resolved
})
.catch((err) => {
});
これが役立つことを願っています
var axios = require('axios');
var url1 = axios.get('https://www.something.com').then(function(response){
console.log(response.data)
})
var url2 = axios.get('https://www.something2.com').then(function(response){
console.log(response.data)
})
var url3 = axios.get('https://www.something3.com').then(function(response){
console.log(response.data)
})
Promise.all([url1, url2, url3]).then(function(values){
return values
}).catch(function(err){
console.log(err);
})
このような何かが動作するはずです:
const axios = require('axios');
function makeRequestsFromArray(arr) {
let index = 0;
function request() {
return axios.get('http://localhost:3000/api/' + index).then(() => {
index++;
if (index >= arr.length) {
return 'done'
}
return request();
});
}
return request();
}
makeRequestsFromArray([0, 1, 2]);