web-dev-qa-db-ja.com

応答ステータスに基づいてaxiosポストでエラーをスローできますか

意図的にaxiosの.then（）ブロック内でエラーをスローすることは可能ですか？たとえば、APIが204ステータスコードで応答した場合、エラーをスローしてキャッチブロックを実行できますか？

例えば：

axios.post('link-to-my-post-service', {
        json-input
    }).then(response => {
        if (response.status === 200) {
            //proceed...
        }
        else {
            // throw error and go to catch block
        }
    }).catch(error => {
        //run this code always when status!==200
    });

[〜＃〜]編集[〜＃〜]

私はこれを試しましたが、うまくいきませんでした：

var instance = axios.create({
            validateStatus: function (status)
            {
                return status == 200;
            }
        });
axios.post('link-to-my-post-service', {input: myInput}, instance)
    .then(response => {
            dispatch({
                    type: "FETCH_SUCCESS",
                    payload: response.data
                });
        }).catch(error => {
            dispatch({
                type: "FETCH_FAILED",
                payload: error
            });
        });

ステータスコード204を取得しても、実行されたブロックはcatchブロックではなくthen（）ブロックです。

編集2

Ilarioの提案を使用した正解は次のとおりです。

var instance = axios.create({
            validateStatus: function (status)
            {
                return status == 200;
            }
        });
instance.post('link-to-my-post-service', {input: myInput})
    .then(response => {
            dispatch({
                    type: "FETCH_SUCCESS",
                    payload: response.data
                });
        }).catch(error => {
            dispatch({
                type: "FETCH_FAILED",
                payload: error
            });
        });

ステータスコードが200でない場合は、catchブロックコードが実行されます。

javascriptaxios
12
jenny

GitHub Project Page を見ると、次のオプションの説明に気付くでしょう。

/* `validateStatus` defines whether to resolve or reject the promise for a given
 * HTTP response status code. If `validateStatus` returns `true` (or is set to `null`
 * or `undefined`), the promise will be resolved; otherwise, the promise will be
 */ rejected.
validateStatus: function (status) {

    return status >= 200 && status < 300; // default
},

したがって、独自の構成でインスタンスを作成できます。

var instance = axios.create({

   validateStatus: function (status) {

        return status == 200;
    },
});

デフォルトを設定することもできます。これらはすべてのリクエストに適用されます。

axios.defaults.validateStatus = () => {

    return status == 200;
};

更新1

特定の操作でのみ構成を設定するには、「config」を目的の値またはメソッドに置き換えることができます。

axios.post(url[, data[, config]])

更新2

私はこれを試しましたが、うまくいきませんでした。

インスタンスをaxios.post（）に渡すことはできません。新しいインスタンスでpostを呼び出す必要があります。

var instance = axios.create({

    validateStatus: function (status) {
        return status == 200;
    }
});

instance.post('url', data, config);
11
Ilario Engler

ご提案ありがとうございます。答えは予想よりも簡単でした。

デフォルトのオプションを設定してaxiosの動作を変更したくなかったので、以下のコードのようなものを試したところ、うまくいきました。コードthrow new Error("Error");が実行されるたびに、その後、catchブロックコードが実行されます。

axios.post('link-to-my-post-service', {
        json-input
    }).then(response => {
        if (response.status === 200) {
            //proceed...
        }
        else {
            // throw error and go to catch block
            throw new Error("Error");
        }
    }).catch(error => {
        //when throw "Error" is executed it runs the catch block code
        console.log(error)
    });
5
jenny