javascirptでaxiosを実行すると、catchが発生する場合がある。

Question

javascirptでaxiosを実行すると、サーバーには送信できるのですが、
クライアント側でResponseステータスコードはわからないのですが、
catchが出てしまいます。

その引数に設定しているresponseにはTypeError: Cannot read property 'hide' of undefinedが入っています。

原因がわからなく、どなたかご教授お願いします。

// application/jsonで送信するとうまくいく
onModalSubmitClicked() {
    const viewModel = JSON.parse(JSON.stringify(this.viewModel));

    axios({
        method: "post",
        url: this.createUrl ,
        headers: {
            "Content-Type": "application/json; charset=UTF-8"
        },
        data: JSON.stringify(viewModel)
    }).then(() => {
        console.log("OK");
    }).catch((response) => {
        console.log("NG");
    });
},

// params: { id: 1, order: 10 }の形式で送信すると、サーバーは実行できるが、クライアントでOKにきた後、NGにいってしまう
onRowDragEnd(event) {
    axios({
        method: "post",
        url: this.sortUrl,
        params: { id: 1, order: 10 }　// ダミーデータ
    }).then(() => {
        console.log("OK");    // OKにきた後、NGにいってしまう

    }).catch((response) => {
        console.log("NG");
    });
},

Comments

[int32_t]

then() 部のコードは本当に console.log("OK"); だけですか?

[退会済みユーザー]

コメントありがとうございます。
dataのundefinedのエラーだったのはコードのまちがいだったためすみません。

質問文を訂正させていただきました。

ただし、依然としてaxiosを実行すると、サーバーにpostできて処理は正常ですが、

javascript側でcatchが発生して困っています。

[int32_t]

> catchが発生して困っています。

それはどこかで例外が発生しているからです。その例外を直しましょう。
質問文にはエラーメッセージも例外を出すコードも提示されていないので、具体的なアドバイスができません。

[退会済みユーザー]

再度確認したところ、コンソールエラーはでていないのですが、responseにTypeError: Cannot read property 'hide' of undefinedが入っている状態です。

原因としてはどのようなものが考えられるでしょうか？

[int32_t]

then() 部のコードの中でその例外が発生しています。これ以上はコードが提示されていないのでアドバイスできません。

[退会済みユーザー]

axiosの例外がわかりにくいなと感じますが、それを調べる方法があればよいのですが。

[退会済みユーザー]

質問分に記載しているコードのとおりです。

onRowDragEnd(event) {　// ←普通のtest() とかでも同じ {
axios({
method: "post",
url: this.sortUrl,
params: { id: 1, order: 10 }　// ダミーデータ
}).then(() => {
console.log("OK"); // OKにきた後、NGにいってしまう

}).catch((response) => {
console.log("NG");
});
}

[退会済みユーザー]

>then() 部のコードの中でその例外が発生しています。これ以上はコードが提示されていないのでアドバイスできません。

アドバイスありがとうございます。原因がわかったかもしれません。
たしかに、console.log("OK"); の次行に自作のfunctionをはさんでいたのが原因のようです。

もう少し調べてからご返信させて頂きます。

[退会済みユーザー]

コードを記載していませんでした部分ですが、自作のfunctionで表示していないBootstrapのモーダルを閉じようとしていたのが原因でした。
(登録、更新、削除、並替で同じ処理をしようとしていた)

onSuccess() {
this.myModal.hide();
}
↓とりあえずフラグで分岐しました。
//
onSuccess() {
if (this.isEditStatus == 1 || this.isEditStatus == 2 || this.isEditStatus == 3) {
this.myModal.hide();
}
}

>then() 部のコードの中でその例外が発生しています。これ以上はコードが提示されていないのでアドバイスできません。
→　これがとてもヒントになりました。アドバイスありがとうございます。

Answer 1

コードを記載していませんでした部分ですが、自作のfunctionで表示していないBootstrapのモーダルを閉じようとしていたのが原因でした。
(登録、更新、削除、並替で同じ処理をしようとしていた)

onSuccess() {
   this.myModal.hide();
}

// ↓とりあえずフラグで分岐しました。

onSuccess() {
    if (this.isEditStatus == 1 || this.isEditStatus == 2 || this.isEditStatus == 3) {
        this.myModal.hide();
    }
}