バックグラウンド
最近vueプロジェクトを書いているときに、axios呼び出しインターフェイスピットに遭遇しました。複数のインターフェイスを呼び出すaxiosを含むフロントエンドモジュールがあり、データの取得を要求した後、windows.location.hrefを使用して新しいページにリダイレクトします。この時点でしかし、axiosから要求されたインターフェースはすべてキャンセル状態になっていることがわかりました。
例えば：
axios.get（ '/ url1'）。then
（function（response）{
console.log（response）;
}）。
catch（function（error）{
console.log（error）;
}）;
axios.get（ '/ url2'）。then
（function（response）{
console.log（response）;
}）。
catch（function（error）{
console.log（error）;
}）;
windows.location.href = "/
このように記述されている場合、axios呼び出しインターフェイスは非同期であるため、url1とurl2が要求される前にwindows.location.hrefが実行される可能性が非常に高くなります。このとき、現在のページで新しいページが開かれ、url1とurl2のリクエストはすべてchromef12コンソールからキャンセルされた状態になります。
StackOverflowオンラインでの癌の説明は次のとおりです。
1.リクエストの原因となったDOM要素が削除されました（つまり、IMGがロードされていますが、ロードが発生する前にIMGノードを削除しました）
2.データの読み込みが不要になるようなことをしました。（つまり、iframeの読み込みを開始してから、srcを変更するか、コンテンツを上書きします）
3.同じサーバーに送信されるリクエストが多数あり、以前のリクエストのネットワークの問題により、後続のリクエストが機能しないことが示されました（DNSルックアップエラー、以前の（同じ）リクエストの結果、HTTP 400エラーコードなど）
簡単に言うと、要素または要求は、まだ完了していないときに中断されます。
解決
ここには2つの方法があります。1つは、axios要求完了の処理フローでwindows.location.hrefを直接ラップする方法です。以下のように：
axios.get（ '/ url1'）。then
（function（response）{
axios.get（ '/ url2'）。then
（function（response）{windows.location.href = "/"
}）。
catch（function（エラー）{
console.log（error）;
}）;
}）。
catch（function（error）{
console.log（error）;
}）;
これの利点は、url1とurl2の両方が正常に要求されるまでページがジャンプしないことです。しかし、新しい質問があります。リダイレクトする前にurl1とurl2を複数回要求する場合、どのように書くのですか？例えば：
for（循環環）
{
axios.get（ '/ url1'）。then
（function（response）{
axios.get（ '/ url2'）。then
（function（response）{
}）。
catch（function（error）{
console .log（error）;
}）;
}）。
catch（function（error）{
console.log（error）;
}）;
} windows.location.href = "/"
この場合、axiosリクエストは完了する前にジャンプする可能性があります。Axiosは非同期であるため、windows.location.hrefはaxiosの前に実行される場合があります。
これは、タイマーを使用してwindows.location.hrefの実行タイミングを遅らせるトリッキーな方法です。
setTimeout（function（）{
windows.location.href = "/"
}、2000）;
このように記述されているため、基本的に、windows.location.hrefがaxiosの後に実行されることが保証されます（axios呼び出しインターフェイスとビジネスロジック処理の時間によって異なります）
ブロガー：お金を稼ぐためのテスト
モットー：テストと自動化に焦点を当て、研究開発の効率を改善するよう努めます。元の蓄積を完了するためのテストと勤勉さ、読書と財務管理から経済的自由まで。
csdn：https：//blog.csdn.net/ccgshigao
ブログパーク：https：//www.cnblogs.com/qa-freeroad/
51cto：https：//blog.51cto.com/14900374