2つあるajax処理を１つにまとめつつ並列に処理をさせたい

Question

現在、コード内に2つajax処理があり別々の処理をさせているのですが、取得元のURLが同じの為、ajax処理を1つにまとめつつ、並列処理をさせたいと思っております。

また、まとめることでブラウザの表示速度を向上させたいと考えております。

現在のコードは、普通のJSで処理をさせている部分とvue.jsで処理をさせている部分があります。

  
      $.ajax({
        url:
          "サイトのURL/wp-json/wp/v2/post?per_page=1000",
        type: "GET",
        dataType: "json",
        timeout: 10000,  // 単位はミリ秒
      })
        .done(
          function (data, textStatus, jqXHR) {
            処理1
          }.bind(this)
        )
        .fail(
          function (jqXHR, textStatus, errorThrown) {

          }.bind(this)
        );

var app = new Vue({
    el: "#app",
    data: {
  
      products: [],
    },

    created: function () {
  
      $.ajax({
        url:
          "サイトのURL/wp-json/wp/v2/post?per_page=1000",
        type: "GET",
        dataType: "json",
        timeout: 10000,  // 単位はミリ秒
      })
        .done(
          function (data, textStatus, jqXHR) {
            this.products = data;
          }.bind(this)
        )
        .fail(
          function (jqXHR, textStatus, errorThrown) {
            this.isError = true;
            this.message = "商品リストの読み込みに失敗しました。";
          }.bind(this)
        );
    },
    computed: {
      // 絞り込み後の商品リストを返す算出プロパティ
      filteredList: function () {
  
        for (var i = 0; i < this.products.length; i++) {
          処理2
      },
    },
  });
  

■知りたい内容

どうやったらajax取得を1度のみでデータを共有して使用する、かつ取得中のデータを並列に処理させていく為の書き方を教えて頂きたいです。

Answer 1

vueでjQueryを処理するのは無駄だと思いますのでfetchで十分でしょう。
取りに行くのが１回だけならthenのなかで２つの処理を書けばよいです

Comments

[yambejp]

もしfetchするタイミングが違うなら別々に実行するしかないですが
すでに処理済みのfetchがうまくキャッシュを読めば
さほど負荷が高くはなりません

[tomato01]

ご回答を頂き誠にありがとうございます。fetchを利用する場合ですが、fetchコードはvueのコード内で書く必要がありますでしょうか。もしくは、普通のjsの方に書いてvueの方に持ってくることなどはできますでしょうか。

[yambejp]

vueの公式サイト（https://jp.vuejs.org/）の「なぜvue.js ?」というビデオをみてください
fetchの利用例を解説しています

[tomato01]

参考にURLを頂きましてありがとうございます。下記のような書き方で処理１と処理2は並列処理ができる認識でしょうか。（度々の質問、すみません。）

fetch(“URL”)
.then(response => {
return response.json();
})
.then(data => {
処理1
})
.then(data => {
処理2
})
.catch(error => {
console.log("失敗しました");
});

[yambejp]

どうせ同じパラメータで同じもの読むなら、最初に読んで変数にいれておいて、
必要に応じてその変数を呼び出せばよいのでは？
結局何がどう並列かも提示されていないので回答はしづらいです

[tomato01]

なるほど、そうですね。ご回答ありがとうございました。