Ini adalah aplikasi Vue.js.

Semuanya dimulai dengan mengklik tombol "Simpan" dan di dalam proses penyimpanan saya perlu melakukan panggilan API setiap 2 detik jika panggilan API sebelumnya (yang sama) mengembalikan kesalahan 402.

Bagian penting dari kode terlihat sebagai berikut:

methods: {
  save() {
    ...
    Promise.all([updateOrder])
      .then(async values => {
        for (let payment of values[0].payments) {
          if ((payment.payment_type === 10 || payment.payment_type === 11) && payment.status === 0) {
            this.$axios.get(
              `${this.$config.server}/api/crm/payments/qr/${payment.id}/url`
              )
              .then(response => {
                //
              })
              .catch(error => {
                const response = error.response ?? error
                const errorCode = response?.data?.code // It returned error 402
              })
          }
        }
      })
      .catch(
        //
      )
      ...
  }
}

Saya kira saya harus menggunakan:

setInterval(apiCall(payment), 2000)

Tapi, saya tidak yakin bagaimana.

1
tesicg 26 Mei 2021, 15:41

1 menjawab

Jawaban Terbaik

Ini dapat diselesaikan dengan banyak cara tergantung pada logika kode Anda. Cara paling sederhana adalah dengan menggunakan setTimeout, tetapi Anda harus meletakkan panggilan itu di fungsi yang terpisah.

Berikut adalah simulasi panggilan API yang akan ditolak 3 kali berturut-turut dan cara menangani penolakan dengan setTimeout.

let counter = 0

const apiCall = () => counter > 3 ? Promise.resolve() : Promise.reject()

const apiHandler = () => {
  console.log('Call num:', ++counter)
  apiCall()
    .then(() => console.log('Approved'))
    .catch(() => {
      console.log('Rejected')
      setTimeout(apiHandler, 2000)
    })
}

apiHandler()

Solusi lanjutan lainnya adalah axios-retry karena Anda menggunakan axios untuk panggilan API Anda. Berikut adalah contoh tampilan kode Anda:

methods: {
  save() {
    ...
    // Better to move this line to main.js file or 
    // to use custom axios instance (axios.create()) 
    // in case you want to apply axios-retry to this API call only 
    axiosRetry(this.$axios, { retries: 0 });

    const retryOptions = {
      retries: 10,
      retryDelay: () => 2000,
      retryCondition: (error) => {
        return error.response.status === 402
      },
    }

    Promise.all([updateOrder])
      .then(async values => {
        for (let payment of values[0].payments) {
          if ((payment.payment_type === 10 || payment.payment_type === 11) && payment.status === 0) {
            this.$axios.get(
              `${this.$config.server}/api/crm/payments/qr/${payment.id}/url`,
      {'axios-retry': retryOptions}
              )
              .then(response => {
                //
              })
              .catch(error => {
                const response = error.response ?? error
                const errorCode = response?.data?.code // It returned error 402
              })
          }
        }
      })
      .catch(
        //
      )
      ...
  }
}
0
Liro Dasmaz 27 Mei 2021, 10:22