fetch封裝

來自專欄高質量的React和Redux

背景：React項目伺服器交互用fetch的情況，對其封裝處理一些公共錯誤。

Fetch.tsx

import { message } from antd;const request = (url: string, config: any) => { return fetch(url, config).then((res: any) => { if (!res.ok) { // 伺服器異常返回 throw Error(); } return res.json(); }).then((resJson: any) => { if (xxx) { // 項目內部認為的錯誤 throw Error(); } else { return resJson; } }).catch((error: any) => { // 公共錯誤處理 message.error(內部錯誤，請重新登錄); });};// GET請求export const get = (url: string) => { return request(url, {method: GET});};// POST請求export const post = (url: string, data: any) => { return request(url, { body: JSON.stringify(data), headers: { content-type: application/json }, method: POST });};

2、使用，xxx.tsx

import * as Fetch from ../util/fetch;Fetch.post(url, data).then((response: any) => { if (response) { // 沒有發生異常 。。。 }});

推薦閱讀：