web-dev-qa-db-ja.com

VuexおよびAxiosを使用したVuejsでのエラー処理のベストプラクティス

Vuex + axiosを使用しています。vuex+ axiosのエラー処理のベストプラクティスを知りたいです。私が今していることは、axiosを使用してリクエストし、エラーが返された場合、突然変異でコミットされ、状態が更新されることです。私がやりたいのは、リクエストから応答エラーがある場合、コンポーネントに返されるので、エラーをより速く処理できるようにすることです。

角度のように、依存性注入があり、応答がコンポーネントに戻ります。

vue.jsaxiosvuex
10
LordGrim

ケーキを持って食べてください。既に interceptor ...を使用していると仮定します.

axios.interceptors.response.use(function (response) {
  return response;
}, function (error) {
  store.commit('ERROR', error) // just taking some guesses here
  return Promise.reject(error) // this is the important part
})

これにより、約束の拒否が呼び出し側に戻るので、コンポーネントで次のようになります...

axois.whatever(...).then(res => {
  // happy days
}, err => {
  // oh noes!
})
15
Phil

エラーログに使用したアプローチはこれです。 これにより、すべてのvueエラーをコードで処理できます。

window.onerror = function (message, source, lineno, colno, error) {
  /// what you want to do with error here
};

これはbrowserのグローバルエラーハンドラです。これで処理できるエラーがキャッチされない場合。

また、エラーを処理する場合。このようにすることができます。

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
      // when you throw error this will also fetch error.
       throw error;
  });

vueでエラー処理を確認したい場合は、に進みます。 https://vuejs.org/v2/api/#errorHandler

Vue.config.errorHandler = function (err, vm, info) {
  // handle error
  // `info` is a Vue-specific error info, e.g. which lifecycle hook
  // the error was found in. Only available in 2.2.0+
}

Window.onerrorが使用されているリンクを教えてください

https://github.com/stacktracejs/stacktrace.js/

5
Himanshu sharma

私は、エラーを処理するための一般的な方法が常に存在するとは限らないという結論に達しました。別々のapiファイルを用意するのは良いことですが、上記の言及でこれを仲介します。個別のAPIファイルがあり、次のことを行っています。

//comments-api.js
export default {
    get (url, handler){
        //return the promise to further possible chains
        return axios.get(url)
            .then( response => handler.success(response.data) )
            .catch( error => handler.serverDownOrUnexpected(error.response) )
    },
}
//comments.js - vuex module
import $comments from './../../services/api/comments-api'
...
actions: {
    $comments.get(url, {
        success: (data) => commit('success_handler', data),
        serverDownOrUnexpected: (error) => commit('unexpected', error)
        //so on...
    })
}
...

このアプローチでは、特定のエラーの処理方法を変更するたびに、1か所で変更を加える必要があり、さらに分離コードの利点があります。

0
Botea Florin

約束の力！ （プラスasync/await）

vueメソッド（mycomponent.js）

async YourAsyncMethod() {
    const payload = {key: "var"}
    const result = await axios
        .post('/your/api/endpoint', payload)
        .catch(e => {
            console.log(e.message)
        });
}

yourMethod() {
    // start axios logic
    const payload = {key: "var"}
    axios
        .post('/your/api/endpoint', payload)
        .then(response => {
            console.log(response.data)

            // start state action logic
            this.$store
                .dispatch('yourAction', payload)
                .then(add => {
                    console.log('success mutation!');
                })
                .catch(error => {
                    // error = Error object,
                    console.log('error mutation:',error.message);
                    console.log(error) // to se full error object
                });
        })
        .catch(error => {
            console.log('error axios request', error.data)
        });
}

状態アクション（store/actions.js）を使用

yourAction(){
    const some_logic = false;
    if (!some_logic) {
        // when return a Promisse.reject
        //you can get error with catch(e) from youtMethod
        return Promise.reject(new Error("Impressora já adicionada"))
    }
    context.commit('MUTATION_METHOD', payload);
}

axiosを使用

http
    .post('/your/api/endpoint', payload)
    .then(response => {
        console.log(response.data)
    })
    .catch(error => {
        console.log('error', error.data)
    });
0
Leonardo Filipe