vue / axios を利用してAPIを複数回実行したい

vue / axios を利用して DMM の API を実行をしたいと考えております。

javascript , vue , axios も初学者で調べながらやってますが、どのようにすれば複数回実行できるのかわからないので教えてください。

まず、複数回実行したい理由ですが、DMM の API の最大取得件数が 100 件のため、複数回実行して全件取得したいと考えております。

一番の目的は全件取得することです。

API のパラメータで、検索開始位置 offset を指定できるので、検索開始位置を 1, 101, 201, .... のように変えて、取得したデータを追加していけば全件取得できるのではと考えました。

100件を表示することはできましたが、複数回実行して全件取得することができません。

下記のように記述しました。

※ API ID などは xxxxx にして、不要な部分は削除しました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tet</title>
</head>
<body>

    <div class="p-result">

        <div v-for="item in items" :key="items.content_id">
            <div><a :href="item.affiliateURL"><img v-lazy="item.imageURL.large"></a></div>
            <div>{{ item.date }}</div>
        </div>

    </div>

</main>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>

<?php
# 全件の数を取得してそれを vue の for で利用
$url = "https://api.dmm.com/affiliate/v3/ItemList?api_id=xxxxxxxxxxxxxxxx&affiliate_id= xxxxxxxxxxxxxx&site=FANZA&service=digital&floor=videoa&article=genre&article_id=6793&output=json";
$json = mb_convert_encoding(file_get_contents($url), 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN');
$json_arr = json_decode($json,true);
?>

<script>
    Vue.use(VueLazyload, {
        throttleWait : 500,
        error: 'images/ico_loading.gif',
        loading: 'images/ico_loading.gif',
    });
    new Vue({
        el: '.p-result',
        data () {
            return { items: null }
        },
        mounted () {

            var total = <?= $json_arr['result']['total_count']; ?>;
            for (var i = 1; i < total; i += 100) {

                if(i == 1) {

                    axios.get('https://api.dmm.com/affiliate/v3/ItemList' , {
                        params: {
                            'api_id' : 'xxxxxxxxxxxxxxxx',
                            'affiliate_id' : 'xxxxxxxxxxxxxx',
                            'site' : 'FANZA',
                            'service' : 'digital',
                            'floor' : 'videoa',
                            'hits' : '100',
                            'offset' : i,
                            'sort' :'date',
                            'article' : 'genre',
                            'article_id' : '6793',
                            'output' : 'json'
                        }
                    })
                    .then(response => (this.items = response.data.result.items))
// 上記の記述で最初の100件表示されるけど、一旦データを this.items に格納したいので下記のように記述
//                    .then(this.items = response.data.result.items)

                } else {

// 2回目以降のループで this.items に push で追加しようと下記のように記述したけどエラー
//
//                    axios.get('https://api.dmm.com/affiliate/v3/ItemList' , {
//                        params: {
//                            'api_id' : 'xxxxxxxxxxxxxxxx',
//                            'affiliate_id' : 'xxxxxxxxxxxxxx',
//                            'site' : 'FANZA',
//                            'service' : 'digital',
//                            'floor' : 'videoa',
//                            'hits' : '100',
//                            'offset' : i,
//                            'sort' :'date',
//                            'article' : 'genre',
//                            'article_id' : '6793',
//                            'output' : 'json'
//                        }
//                        .then(function (response) {
//                            this.items.push(response.data.result.items);
//                        })

                }
            }
        }
    })
</script>

</body>
</html>

最初に php で全ての件数を取得して vue の for 内で API のデータを取得して、push で追加しようと試みましたが表示できません。

理解が浅いため、根本的な実装の方法に誤りがあるかもしれませんが、どのようにすれば全件取得できますでしょうか？

自分が書いたコードを少し変更すれば実現できるのなら、具体的な箇所をご指摘いただけると助かりますが、根本的に誤りがあるならこのような方法があるなどアドバイスいただけると嬉しいです。

アドバイスを参考に調べます。

よろしくお願いしますm(__)m

行動規範の内容に同意します

回答2件

ベストアンサー

APIを複数回実行し、まとめて処理を行いたい場合のために、axios.allといったものが用意されているので、こちらの利用も検討してみてはどうでしょうか？
axios、async/awaitを試してみた

ただし、一度に多くのアクセスを走らせるとDMM側からbot、もしくはサーバ攻撃と判定され、弾かれる可能性もあるので、一回あたりのアクセス数を制限しておくなどの考慮も必要かもしれません。

投稿2019/01/22 01:04

退会済みユーザー

総合スコア0

退会済みユーザー

2019/01/22 01:57

なるほど、axios.all で API の並列処理ができるのですね。それに並列処理でAPIを実行し、さらに多くのアクセスがあるとbotや攻撃扱いされるのですね。（可能かわかりませんが）無限スクロールのように100件表示したときに次の100件を読み込んで表示するなど、対策が必要なのですね。参考になりました。ありがとうございますm(__)m

行動規範の内容に同意します

これユーザがページのソース見ると api_id 確認できるやつですよね。
DMMウェブサービス利用規約の第5条に API ID 秘密にしなきゃダメって書いてあるので、そこから違う気がしました。
エラーメッセージ無いので分からないですけど cors か何かで弾かれてるんでしょう。
サーバから直接 DMM の api を叩く感じにするといけるかと思います。

投稿2019/01/21 22:15