Vue+Axios同期要求

3758 ワード

axios自体は同期要求がなく、同期要求を実現するにはES 7のasyncawaitを用いる
ES 7の非同期特性async / awaitasyncは、1つの関数が非同期であることを宣言するために使用され、awaitは、1つの非同期関数で文の実行が完了するのを待つことを宣言するために使用される.つまり、awaitasync関数でしか使用できません.簡単な例は次のとおりです.
const fun1 = async function () {
  await axios.get('url)
}

Vueではasync / awaitを使用して同期要求を実現
methods: {
  fun1: async function () {
    await axios.get('url)
  }
}

なお、同期要求が他の関数にカプセル化されている場合、各関数は非同期関数として作成される必要があります.例として、Vueはfun 3を呼び出しますが、中間で何回か判断されたため、最終的にfun 1で要求されると、関連する各関数は非同期化される必要があります.
methods: {
  fun1: async function () {
    await axios.get('url)
  },
  fun2: async function () {
    ...
    await this.fun1()
    ...
  },
  fun3: async function () {
    ...
    await this.fun2()
    ...
  },
}