fetch API 实现 GET 和 POST 请求

2022-09-15 1 条评论 1,452 次阅读 被赞了 0 次

Fetch API 是 XMLHttpRequest 实现功能的一个更理想的替代方案，它提供了一个 JavaScript 接口，用于异步的执行 http 请求。

在常规的简单接口调试中，使用 Fetch API 可以在浏览器控制台快速的发起一个接口请求，并查看其返回结果。下面是相关实现的示例（备份：用于快速查找使用）。

Fetch API 执行 Get 请求示例：

1
2
3
4
5
6
7
8
await fetch(url, {
    method: 'GET',
    credentials: 'include',
    headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
    },
}).then(response => response.json());

Fetch API 执行 POST 请求示例：

1
2
3
4
5
6
7
8
9
await fetch(url, {
    method: 'POST',
    credentials: 'include',
    body: JSON.stringify(params),
    headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
    },
}).then(response => response.json());

基于 Fetch API 实现 GET 和 POST 请求的简单封装示例（TypeScript）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
type PlainObject = Record<string, any>;
 
export interface APIResponse< T = PlainObject> extends PlainObject {
    data: T;
    errorNo: number;
    errorInfo?: string;
    success?: boolean;
}
 
function toQueryString(params?: Record<string, unknown>) {
    if (!params) return '';
 
    return Object.entries(params)
        .map(([key, val]) => `${encodeURIComponent(key)}=${encodeURIComponent(typeof val === 'string' ? val : JSON.stringify(val))}`)
        .join('&');
}
 
function toFormData(params: Record<string, unknown>) {
    const form = new FormData();
    Object.entries(params).forEach(([key, val]) => {
        form.append(key, typeof val !== 'string' && !(val instanceof Blob) ? JSON.stringify(val) : val);
    });
    return form;
}
 
async function handlerResponse< T>(response: Response) {
    const result: APIResponse< T> = { errorNo: 0, data: [] as never };
 
    try {
        const res: APIResponse< T> = await response.json();
        Object.assign(result, res);
        result.errorNo = +result.errorNo || 0;
    } catch (err) {
        const reason = err as { message?: string };
 
        (window.logger || console).error(`[http][get][err]`, reason.message || reason);
        if (response.status !== 200) result.errorNo = response.status || -400;
        result.errorInfo = response.statusText || reason.message;
    }
 
    // logger.debug(`[http][req][response]`, result.errorNo, result);
 
    return result;
}
 
export const httpRequest = {
    baseHref: '',
    get< T = PlainObject>(url: string, params?: PlainObject, headers?: RequestInit['headers']): Promise<APIResponse< T>> {
        const qs = toQueryString(params);
        if (qs) url += url.includes('?') ? `&${qs}` : `?${qs}`;
        if (this.baseHref && !url.startsWith(this.baseHref)) {
            url = this.baseHref + url;
        }
 
        return fetch(url, {
            method: 'GET',
            credentials: 'include',
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json',
                ...headers,
            },
        }).then(response => handlerResponse< T>(response));
    },
    post< T = PlainObject>(
        url: string,
        params: PlainObject,
        headers?: RequestInit['headers'],
        type: 'json' | 'formdata' | 'payload' = 'json'
    ): Promise<APIResponse< T>> {
        if (this.baseHref && !url.startsWith(this.baseHref)) {
            url = this.baseHref + url;
        }
        return fetch(url, {
            method: 'POST',
            credentials: 'include',
            body: type === 'formdata' ? toFormData(params) : type === 'payload' ? toQueryString(params) : JSON.stringify(params),
            headers: {
                Accept: 'application/json',
                'Content-Type': type === 'json' ? 'application/json;charset=UTF-8' : 'application/x-www-form-urlencoded;charset=UTF-8',
                ...headers,
            },
        }).then(response => handlerResponse< T>(response));
    },
};

基于 Fetch API 实现 GET 和 POST 请求的简单封装示例（JavaScript）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
function toQueryString(params) {
    if (!params) return '';
 
    return Object.entries(params)
        .map(([key, val]) => `${encodeURIComponent(key)}=${encodeURIComponent(typeof val === 'string' ? val : JSON.stringify(val))}`)
        .join('&');
}
 
function toFormData(params) {
    const form = new FormData();
    Object.entries(params).forEach(([key, val]) => {
        form.append(key, typeof val !== 'string' && !(val instanceof Blob) ? JSON.stringify(val) : val);
    });
    return form;
}
 
async function handlerResponse(response) {
    const result = { errorNo: 0, data: [] };
 
    try {
        const res = await response.json();
        Object.assign(result, res);
        result.errorNo = +result.errorNo || 0;
    } catch (err) {
        const reason = err;
 
        (window.logger || console).error(`[http][get][err]`, reason.message || reason);
        if (response.status !== 200) result.errorNo = response.status || -400;
        result.errorInfo = response.statusText || reason.message;
    }
 
    // logger.debug(`[http][req][response]`, result.errorNo, result);
 
    return result;
}
 
const httpRequest = {
    baseHref: '',
    get(url, params, headers) {
        const qs = toQueryString(params);
        if (qs) url += url.includes('?') ? `&${qs}` : `?${qs}`;
        if (this.baseHref && !url.startsWith(this.baseHref)) {
            url = this.baseHref + url;
        }
 
        return fetch(url, {
            method: 'GET',
            credentials: 'include',
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json',
                ...headers,
            },
        }).then(response => handlerResponse(response));
    },
    post(
        url,
        params,
        headers,
        type
    ) {
        if (this.baseHref && !url.startsWith(this.baseHref)) {
            url = this.baseHref + url;
        }
        return fetch(url, {
            method: 'POST',
            credentials: 'include',
            body: type === 'formdata' ? toFormData(params) : type === 'payload' ? toQueryString(params) : JSON.stringify(params),
            headers: {
                Accept: 'application/json',
                'Content-Type': type === 'json' ? 'application/json;charset=UTF-8' : 'application/x-www-form-urlencoded;charset=UTF-8',
                ...headers,
            },
        }).then(response => handlerResponse(response));
    },
};
  • https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

相关文章:

Default Thumbnail从 tsconfig 参数 importHelpers 谈 ECMAScript 高级语法编译与辅助函数的处理方案 Default ThumbnailCSS 代码质量校验：stylelint 、stylefmt 及 post-sorting 的开发环境配置参考 Default ThumbnailHTML5 postMessage 消息传输与 POST 跨域通信 Default ThumbnailjavaScript 中的函数柯里化(Currying)简述 Default Thumbnail什么是 QUnit ：Javascript 单元测试框架 QUnitjs 简介 Default ThumbnailHTML5 FormData 与无刷新文件上传 Default Thumbnailgrunt 快速入门：使用 grunt 自动化构建工具进行前端开发 Default Thumbnail如何保障前端项目代码质量 确保前端 JavaScript 浮点数精度的四则运算方法 Default ThumbnailAngular 9 新特性及 Angular 8 升级至 Angular 9 参考 Default ThumbnailReact 16 中的错误边界(Error Boundaries)与全局错误处理 Default ThumbnailCJS 代码中引入 ESM 模块异常：Error [ERR_REQUIRE_ESM]: require() of ES Module
点赞 (0)
知识共享许可协议
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可
  1. ejsoon说道：
    2022年09月23日 12:44 下午
    Opera 65.2.3381.61420 Opera 65.2.3381.61420 Android 5.1.1 Android 5.1.1

    我以前在開發時，有時用XMLHttpRequest，有時也用fetch，感覺差不多。

    回复

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Captcha Code