0. 系列文章

項目源碼請猛戳這里!!!

1. 前言

在之前的文章中，雖然我們已經實現了axios的基本功能，但是那些都是正常情況，我們知道，在實際開發中，不可能沒有錯誤發生。所以，接下來我們需要對一些常見的錯誤情況進行異常捕獲和處理。我們期望，當異常出現時，我們都可以在 reject 回調函數中捕獲到，如下形式：

axios({
  method: 'get',
  url: '/api/handleError'
}).then((res) => {
  console.log(res)
}).catch((e) => {
  console.log(e)
})

2. 需求分析

首先我們先來分析下一些常見的請求異常：

網絡異常，當網絡不通時拋出的異常；
請求超時，當請求發出后在指定時間內沒有收到響應時拋出的異常。
狀態碼非200-300異常，當請求的狀態碼不在200-300之間時，我們也認為它出現了異常；

OK，接下來，我們就對上面所列出的三種異常進行分別處理。

3. 異常處理

3.1 網絡異常

當網絡出現異常（比如不通）的時候發送請求會觸發 XMLHttpRequest 對象實例的 error 事件，於是我們就可以在 onerror 的事件回調函數中捕獲此類錯誤。

我們在 src/xhr.ts 中的xhr函數中添加如下代碼：

// 4.1 網絡錯誤事件
request.onerror = function() {
    reject(new Error("Net Error"));
};

3.2 請求超時

在官方axios中，它允許用戶在發請求時配置請求的超時時間timeout，也就是當請求發送后超過某個時間后仍然沒收到響應，則請求自動終止，並會觸發 XMLHttpRequest 對象實例的 ontimeout 事件。

1.首先，我們也要允許用戶在發請求時可配置超時時間，所以我們在之前寫好的請求參數接口類型AxiosRequestConfig里添加timeout選項，如下：

// src/types/index.ts

export interface AxiosRequestConfig {
  url: string;
  method?: Method;
  headers?: any;
  data?: any;
  params?: any;
  responseType?: XMLHttpRequestResponseType;
  timeout?: number;
}

2.接着，在src/xhr.ts中的xhr函數中獲取用戶配置的timeout,如果該參數不為空，則將其設置到 XMLHttpRequest 對象實例request上。

const {data = null,url,method = "get",headers,responseType,timeout} = config;
if (timeout) {
  request.timeout = timeout;
}

3.最后，我們通過注冊 XMLHttpRequest 對象實例的 ontimeout 事件來捕獲請求超時異常。

request.ontimeout = function() {
  reject(new Error(`Timeout of ${timeout} ms exceeded`));
};

3.3 非200-300狀態碼

對於一個正常的請求，往往會返回 200-300 之間的 HTTP 狀態碼，對於不在這個區間的狀態碼，我們也把它們認為是一種錯誤的情況做處理。

1.首先，我們先在xhr函數中的onreadystatechange 的回調函數中，添加了對 request.status 的判斷，因為當出現網絡錯誤或者超時錯誤的時候，該值都為 0。

if (request.status === 0) {
    return;
}

2.然后，我們再判斷狀態碼是否在200-300之間，來決定是否拋出異常。

我們編寫一個輔助函數handleResponse，如果狀態碼response.status在200-300之間，則 resolve(response)，否則reject。

function handleResponse(response: AxiosResponse): void {
    if (response.status >= 200 && response.status < 300) {
        resolve(response);
    } else {
        reject(new Error(`Request failed with status code ${response.status}`));
    }
}

OK，三種異常處理就已經寫完了，接下來我們就可以編寫demo，來測試下效果如何。

4. demo編寫

在 examples 目錄下創建 handleError目錄，在 handleError目錄下創建 index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>handleError demo</title>
  </head>
  <body>
    <script src="/__build__/handleError.js"></script>
  </body>
</html>

接着再創建 app.ts 作為入口文件：

import axios from "../../src/index";

// 1.正常情況
axios({
  method: "get",
  url: "/api/handleError"
})
  .then(res => {
    console.log(res);
  })
  .catch(e => {
    console.log(e);
  });

// 2.url故意寫錯
axios({
  method: "get",
  url: "/api/handleError1"
})
  .then(res => {
    console.log(res);
  })
  .catch(e => {
    console.log(e);
  });

// 3. 模擬網絡錯誤
setTimeout(() => {
  axios({
    method: "get",
    url: "/api/handleError"
  })
    .then(res => {
      console.log(res);
    })
    .catch(e => {
      console.log(e);
    });
}, 5000);

// // 4.配置請求超時時間為2秒，模擬請求超時
axios({
  method: "get",
  url: "/api/handleError/timeout",
  timeout: 2000
})
  .then(res => {
    console.log(res);
  })
  .catch(e => {
    console.log(e.message);
  });

接着在 server/server.js 添加新的接口路由：

// 響應正常情況，有50%幾率響應成功，有50%幾率響應失敗，返回狀態碼500
router.get('/api/handleError', function(req, res) {
  if (Math.random() > 0.5) {
    res.json({
      msg: `hello world`
    })
  } else {
    res.status(500)
    res.end()
  }
})
// 響應請求超時情況，這里我們設置3秒后響應，而發請求那里設置了超時時間為3秒，所以會發生請求超時異常
router.get('/api/handleError/timeout', function(req, res) {
  setTimeout(() => {
    res.json({
      msg: `hello world`
    })
  }, 3000)
})

最后在根目錄下的index.html中加上啟動該demo的入口：

<li><a href="examples/handleError">handleError</a></li>

OK,我們在命令行中執行：

# 同時開啟客戶端和服務端
npm run server | npm start

接着我們打開 chrome 瀏覽器，訪問 http://localhost:8000/ 即可訪問我們的 demo 了，我們點擊 handleError，通過F12的控制台我們可以看到：有3條請求的響應信息都已經被打印出來了：

第一條為請求成功狀態，返回信息已經被打印出來
第一條請求狀態碼為500，成功打印除了狀態碼信息Error: Request failed with status code 500
第二條我們故意把請求的url寫錯，所以報了404錯誤，我們也成功打印出了錯誤信息；
第三條響應超時，也打印出了超時信息Timeout of 2000 ms exceeded。

接着，我們刷新瀏覽器，然后迅速的在5秒之內點擊F12的network選項，把offline勾選上，此時表示瀏覽器網絡斷開，我們就能看到模擬網絡錯誤情況。

5. 遺留問題

OK，三種異常情況雖然都已經成功處理了，但是這僅僅是錯誤的文本信息，對於排錯來說極不方便，所以我們最好還能夠返回錯誤屬於哪個請求、請求的配置、響應對象等其它信息。那么，下篇文章我們就來繼續補充，實現異常處理的增強版。
（完）

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 使用Typescript重構axios(十)——異常處理：增強版使用Typescript重構axios(五)——實現基礎功能：處理請求的header 使用Typescript重構axios(四)——實現基礎功能：處理post請求參數使用Typescript重構axios(三)——實現基礎功能：處理get請求url參數使用Typescript重構axios(六)——實現基礎功能：獲取響應數據使用Typescript重構axios(十五)——默認配置使用Typescript重構axios(十七)——增加axios.create接口 axios的封裝與異常處理（async/await） python異常處理（基礎） python基礎之異常處理