質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.12%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 1,896
退会済みユーザー

退会済みユーザー

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+2

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/22 10:57

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

    キャンセル

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/22 10:47

    なるほど、サーバーサイド側で実行しないといけないのですね。
    勝手に Google Maps JavaScript API のように クライアント側(Vue)に記述しても問題ないと考えていました。
    利用規約を確認します。ありがとうございますm(__)m

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.12%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる