作成したメソッドの呼び出しインターフェースの実行順序制御

ご存知のとおり、Vue はシングルページアプリケーションです。ページをロードするときは、ページの作成時にいくつかのインターフェイスを呼び出し、インターフェイスからデータを取得し、それをページ上にレンダリングする必要があります。フック関数の作成フェーズで呼び出されます。

このような書き方はおそらく非常に一般的です

しかし、getList インターフェースからリストデータを取得し、取得したフィールドをパラメータとして他のインターフェースを呼び出したい場合、作成されたフック関数にどのような順序で記述しても、このメソッドでは値を取得できません。js でのネットワークリクエストのデフォルトの実行は非同期です。リクエストは順番に送信され、その後無視されます。誰が最初に返すかは不明です。

$nextTickを使用して、遅延効果を期待して、後で呼び出す必要がある関数を $nextTick に配置してみました。$nextTick は、データを変更した後、次の DOM 更新サイクルが終了した後に遅延コールバックを実行します。 $nextTick を使用すると、更新された DOM をcallback で取得し、次の DOM 更新サイクルが終了した後に遅延コールバックを実行できます。

       this.$nextTick(() => {
         this.handleReceiveSamples()
       })

一言で言えば、期待していた効果は得られませんでした。

そこで setTimeout について考えました。タイマーは関数の実行シーケンスを解決する直接的な方法ですが、最初の呼び出しインターフェイスの応答時間を決定する方法がないため、欠点もあります。設定が長すぎると、ユーザーは設定が短すぎる場合、サーバーが変更された場合、またはネットワークが遅すぎる場合、後続のインターフェイスが呼び出されず、より大きな問題が発生します。この記事を書く前に、バックエンドの同僚から批判を受けましたが、Xiao X さん、変更したとおっしゃっていましたが、インターフェイスはまったく調整されていませんでした。(恥ずかしい！泣く)

ここが重要なポイントです。インターフェイスを呼び出すときにデータを操作する必要があるため、他のメソッドの呼び出しは当然データ操作の一部になります。

遅延する必要があるインターフェイスが前のインターフェイスの .then に記述されている限り、それは簡単に解決できます。（なぜ私はそれを思いつかなかったのですか？）

export default {
  data(){
    return {
      data:{}
    }
  },
  created() {
    this.getList()  // 在这里调用第一个接口
  },
  methods: {
    getList(){
      getList().then(res=>{
        this.data=res.data  //  这里就可以从接口里拿到数据了
        // 这时候在调用第二个接口，就保证了在上一个接口后面执行
        this.handleReceiveSamples(res.data)  
      })
    }
  }  
}

作成したメソッドの呼び出しインターフェースの実行順序制御

おすすめ