メソッドのカプセル化
まず、Ajax リクエストが 2 回カプセル化された新しい haveload.js を作成します。コードは次のとおりです。
import request from '@/utils/request'
// 可以重试的请求方法-get方法
export function retryServerGet(url, maxCount = 1, params = {
}) {
return new Promise((resolve, reject) => {
request
.get(url, {
params })
.then(res => {
resolve(res)
})
.catch(err => {
maxCount <= 1 ? reject(err) : retryServerGet(url, maxCount - 1, params)
})
})
}
// 可以重试的请求方法-post方法
export function retryServerPost(url, maxCount = 1, data = null) {
return new Promise((resolve, reject) => {
request
.post(url, data)
.then(res => {
console.log(res)
resolve(res)
})
.catch(err => {
maxCount <= 1 ? reject(err) : retryServerPost(url, maxCount - 1, data)
})
})
}
上記のコードには 2 つのメソッドがあり、それぞれ get リクエストと post リクエストを処理し、どちらのメソッドも 3 つのパラメータを受け取ります。
- 最初のパラメータ url: リクエストインターフェイスのアドレスを示します。
- 2 番目のパラメータ maxCount: リクエストの最大数たとえば、インターフェイスが 5 回のリクエストを要求する場合、5 つのリクエストのうち 1 つが成功すると、それ以上のリクエストは続行されず、成功した結果が返されます。
- 3 番目のパラメータ: インターフェース要求によって伝送されるパラメータ
説明書
ファイル内に上記のファイルを導入し、カスタムメソッドを記述してエクスポートします。
// 测试get方法
export function testGet1(params) {
return retryServerGet(`/home/getTotalSalesAndIndextest`, 3, params)
}
// 测试post方法
export function testPost() {
return retryServerPost(`/api/custom/conversions`, 3, null)
}
移行
testGet1({
year: 2022}).then(res => {
console.log(res, '222222222')
})
ここの get リクエスト アドレスは存在しませんが、操作の結果を確認するために呼び出しを 3 回繰り返しました。
コンソールに404を3回連続で出力し、アドレスを通常に変更すると以下のようになります。
リクエストを見ると、インターフェースが一度だけ呼び出され、結果が返されていることがわかります。