vformでawait/catchとtry/catchの書き方メモ

Laravel+ vueでフォームを作成する時に便利なvformでapiにアクセスし、レスポンスによって処理を切り分けたい時のawait/catchとtry/catchの書き方メモです。

await/catchの場合:

      const response   = await this.form.post('/register')
        .catch(err => {
          console.log(err.response) // エラー時の処理
          return null // nullを返す
        });
      if(!response){
        return
      }
      this.message = response.data.message

await/catchの場合、catch内の戻り値をresponseに返し、処理が続行されます。そのため正常コード(200-299)以外は処理を止めたい時はnullを返しています。そしてresponseが空(null,空,undefined,0)であれば処理を止める記載をしています。

try/catchの場合:

      let data
      try {
        const response   = await this.form.post('/register')
        data = response.data
      } catch(e) {
        // エラー時の処理
        return
      }
      this.message = data.message

try/catchの場合はcatchで処理を止めることができます。axiosはstatus codeが200-299以外を例外として処理してくれますので、status codeを判定する処理を記載する必要はありません。

まとめ

どちらの書き方をするかは好みです。

phpやJavaなどの言語をやってきた人間からするとtry/catchの方が直感的だと思います。

個人的にはawait/catchの書き方がGo言語っぽくて好みです。