私のアプリケーションでは、ユーザーを認証しながらfetchData関数を呼び出します。ユーザートークンが無効になると、アプリケーションはaxios.all()
を実行し、インターセプターは多くのエラーを返します。
最初のエラーの後にaxios.all()
が実行され続けるのを防ぐ方法は?また、ユーザーに通知を1つだけ表示しますか?
interceptors.js
export default (http, store, router) => {
http.interceptors.response.use(response => response, (error) => {
const {response} = error;
let message = 'Ops. Algo de errado aconteceu...';
if([401].indexOf(response.status) > -1){
localforage.removeItem('token');
router.Push({
name: 'login'
});
Vue.notify({
group: 'panel',
type: 'error',
duration: 5000,
text: response.data.message ? response.data.message : message
});
}
return Promise.reject(error);
})
}
auth.js
const actions = {
fetchData({commit, dispatch}) {
function getChannels() {
return http.get('channels')
}
function getContacts() {
return http.get('conversations')
}
function getEventActions() {
return http.get('events/actions')
}
// 20 more functions calls
axios.all([
getChannels(),
getContacts(),
getEventActions()
]).then(axios.spread(function (channels, contacts, eventActions) {
dispatch('channels/setChannels', channels.data, {root: true})
dispatch('contacts/setContacts', contacts.data, {root: true})
dispatch('events/setActions', eventActions.data, {root: true})
}))
}
}
編集: @ tony19の回答 は、最初のエラー後も保留中のリクエストをキャンセルでき、追加のライブラリを必要としないため、はるかに優れています。
1つの解決策は、一意の識別子を割り当てることです(私はuuid/v4
この例ではパッケージ、他のものを使用して構いません)同時に使用するすべてのリクエストに対して:
import uuid from 'uuid/v4'
const actions = {
fetchData({commit, dispatch}) {
const config = {
_uuid: uuid()
}
function getChannels() {
return http.get('channels', config)
}
function getContacts() {
return http.get('conversations', config)
}
function getEventActions() {
return http.get('events/actions', config)
}
// 20 more functions calls
axios.all([
getChannels(),
getContacts(),
getEventActions()
]).then(axios.spread(function (channels, contacts, eventActions) {
dispatch('channels/setChannels', channels.data, {root: true})
dispatch('contacts/setContacts', contacts.data, {root: true})
dispatch('events/setActions', eventActions.data, {root: true})
}))
}
}
次に、インターセプターで、この一意の識別子を使用してエラーを1回処理することを選択できます。
export default (http, store, router) => {
// Here, you create a variable that memorize all the uuid that have
// already been handled
const handledErrors = {}
http.interceptors.response.use(response => response, (error) => {
// Here, you check if you have already handled the error
if (error.config._uuid && handledErrors[error.config._uuid]) {
return Promise.reject(error)
}
// If the request contains a uuid, you tell
// the handledErrors variable that you handled
// this particular uuid
if (error.config._uuid) {
handledErrors[error.config._uuid] = true
}
// And then you continue on your normal behavior
const {response} = error;
let message = 'Ops. Algo de errado aconteceu...';
if([401].indexOf(response.status) > -1){
localforage.removeItem('token');
router.Push({
name: 'login'
});
Vue.notify({
group: 'panel',
type: 'error',
duration: 5000,
text: response.data.message ? response.data.message : message
});
}
return Promise.reject(error);
})
}
追加の注記、fetchData
関数をこれに簡略化できます:
const actions = {
fetchData({commit, dispatch}) {
const config = {
_uuid: uuid()
}
const calls = [
'channels',
'conversations',
'events/actions'
].map(call => http.get(call, config))
// 20 more functions calls
axios.all(calls).then(axios.spread(function (channels, contacts, eventActions) {
dispatch('channels/setChannels', channels.data, {root: true})
dispatch('contacts/setContacts', contacts.data, {root: true})
dispatch('events/setActions', eventActions.data, {root: true})
}))
}
}
Axiosキャンセルの代わりに、より簡単な Bluebird Promise Cancellation を使用できます。
古いキャンセルと比較した新しいキャンセルの利点は次のとおりです。
- .cancel()は同期です。
- キャンセルを機能させるために必要なセットアップコードはありません
- Promise.allのような他のbluebird機能で構成します
こちらがデモです。各呼び出しが完了したかどうかを追跡するために、axios.get(...).then(...)
にログを追加しました。
行promises.forEach(p => p.cancel())
をコメント化して、キャンセルせずにエラーのない呼び出しが最後まで実行されることを確認します。
_//for demo, check if fetch completes
const logCompleted = (res) => console.log(`Promise completed, '${res.config.url}'`)
function getChannels() {
return axios.get("https://reqres.in/api/users?page=1&delay=5").then(logCompleted)
}
function getContacts() {
return axios.get("https://reqres.in/api/users?page=2").then(logCompleted)
}
function getEventActions() {
return axios.get("https://httpbin.org/status/401").then(logCompleted)
}
Promise.config({ cancellation: true }); // Bluebird config
window.Promise = Promise; // axios promises are now Bluebird flavor
const promises = [getChannels(), getContacts(), getEventActions()];
Promise.all(promises)
.then(([channels, contacts, eventActions]) => {
console.log('Promise.all.then', { channels, contacts, eventActions });
})
.catch(err => {
console.log(`Promise.all.catch, '${err.message}'`)
promises.forEach(p => p.cancel());
})
.finally(() => console.log('Promise.all.finally'))
_
_<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/bluebird/latest/bluebird.core.min.js"></script>
_
axios.all()の代わりにPromise.all()
この古いaxiosの問題 Remove _axios.all
_ and _axios.spread
_#1042 を見ると、
Axiosは内部でPromise.allを使用しています...
この
_axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// Both requests are now complete
}));
_
これで置き換えることができます
_Promise.all([getUserAccount(), getUserPermissions()])
.then(function ([acct, perms]) {
// Both requests are now complete
});
_
そのため、Promiseを直接使用するように切り替えても、同じ機能を使用できます。
約束はすぐに失敗します
いずれかの要素が拒否された場合、Promise.allは拒否されます。たとえば、タイムアウト後に解決する4つのプロミスと、すぐに拒否する1つのプロミスを渡すと、Promise.allはすぐに拒否されます。
このパターンで
_Promise.all(...)
.then(...)
.catch(...);
_
.catch()
は、最初のプロミスが失敗したときにトリガーされます(すべてのプロミスが完了するまで待機するthen()
と対照的です)。
_Promise.all
_および.cancel()
の合成
パターンは非常に単純です。.catch()
のすべてのpromiseをキャンセルするだけです(最初のエラーで呼び出されます)。
詳細についてはこの質問を参照してください Promise.all()が拒否したときに他の約束を停止してください
Vue storeでBluebirdを置き換える
これはVuexの基本的な実装です。
_yarn add bluebird
_
_import Vue from "vue";
import Vuex from "vuex";
import axios from "axios";
import Promise from 'bluebird';
Vue.use(Vuex);
Promise.config({ cancellation: true }); // Bluebird config
window.Promise = Promise; // axios promises are now Bluebird flavor
export default new Vuex.Store({
actions: {
fetchData({ dispatch }) {
function getChannels() {
return axios.get("https://reqres.in/api/users?page=1&delay=5");
}
function getContacts() {
return axios.get("https://reqres.in/api/users?page=2");
}
function getEventActions() { // 401 - auth error
return axios.get("https://httpbin.org/status/401");
}
const promises = [getChannels(), getContacts(), getEventActions()];
Promise.all(promises)
.then(([channels, contacts, eventActions]) => {
dispatch("channels/setChannels", channels.data, { root: true });
dispatch("contacts/setContacts", contacts.data, { root: true });
dispatch("events/setActions", eventActions.data, { root: true });
})
.catch(err => {
promises.forEach(p => p.cancel());
})
}
}
});
_
pvoted answer は、all応答の完了、uuid
への依存関係を待つ必要があるソリューションを提案します。インターセプターの複雑さ。私のソリューションはそれをすべて回避し、Promise.all()
の実行を終了するという目標に対処します。
Axiosは request cancelation をサポートしているため、GET
リクエストを、他の保留中のリクエストをすぐにキャンセルするエラーハンドラーでラップできます。
fetchData({ dispatch }) {
const source = axios.CancelToken.source();
// wrapper for GET requests
function get(url) {
return axios.get(url, {
cancelToken: source.token // watch token for cancellation
}).catch(error => {
if (axios.isCancel(error)) {
console.warn(`canceled ${url}, error: ${error.message}`)
} else {
source.cancel(error.message) // mark cancellation for all token watchers
}
})
}
function getChannels() {
return get('https://reqres.in/api/users?page=1&delay=30'); // delayed 30 secs
}
function getContacts() {
return get('https://reqres.in/api/users?page=2'); // no delay
}
function getEventActions() {
return get('https://httpbin.org/status/401'); // 401 - auth error
}
...
}
インターセプターでは、リクエストのキャンセルによるエラーも無視します。
export default (http, store, router) => {
http.interceptors.response.use(
response => response,
error => {
if (http.isCancel(error)) {
return Promise.reject(error)
}
...
// show notification here
}
}