基于 fetch 的请求封装
原生 fetch 请求失败后(如无网络)状态会变成 reject 走 .catch 。绝大多数情况下业务场景只需要给个 toast 等简单处理。每个请求都 .catch 会显得格外繁琐,并且如果不 .catch, .then 里面的后续处理不会触发,可能会导致逻辑中断。
基于上述情况,可以封装公共请求方法处理异常情况,返回固定格式 { code, data, massage }, 只需在 .then 里面获取数据并处理。
目标
- 保留 fetch 语法不变
- 返回 promise,且状态一定变成 resolve,返回固定数据格式 { code, data, message }
- 给 url 动态添加域名
- 默认失败弹出 toast,且提供开关
- 默认请求中 loading,且提供开关
实现
实现如下
/**
* 返回 Promise({ code, data, message});
*/
import { message } from 'antd';
import { dispatch } from '../index';
import { startLoading, endLoading } from '../store/globalSlice';
// 在 config/env.js 中设置
export const origin = process.env.ORIGIN;
interface MyInit extends RequestInit {
noToastError?: boolean; // 默认false
noLoading?: boolean; // 默认false
}
// 请求返回统一格式
export class Response {
code: number;
data: any;
message: string | null;
constructor(code: number, data: any, message: string | null) {
this.code = code;
this.data = data;
this.message = message;
}
}
export default (input: RequestInfo, myInit?: MyInit) => {
const init: MyInit = myInit || {};
// url 动态添加 origin
if (typeof input === 'string') {
if (!/https?:\/\//.test(input)) {
input = origin + input;
}
}
// 开始 loading
if (!init?.noLoading) {
dispatch(startLoading());
}
// 请求
return fetch(input, {
headers: {
'Content-Type': 'application/json',
},
...init,
})
.then((resp) => {
// code 不为 2xx
if (!/^2\d{2}$/.test(String(resp.status))) {
return new Response(resp.status, null, null);
}
return resp
.json()
.then((json) => {
// toast错误信息
if (json.code !== 0) {
message.error(json.message);
}
// 退出登陆
if (json.code === 20001) {
// logout();
// window.location.pathname = '/login';
}
// 请求成功的数据
return json;
})
.catch((err) => {
// 不是 json 格式
return new Response(999998, null, 'data is not json.');
});
})
.catch((err) => {
// 请求发送失败
message.error('您的网络可能不通,请确认后重试');
return new Response(999999, null, err);
})
.finally(() => {
// 结束 loading
if (!init?.noLoading) {
dispatch(endLoading());
}
});
};
目前只完成了对 json 数据的处理。
其中 loading 部分用了 redux 和 @reduxjs/toolkit,用一个变量记录当前请求个数,控制实际 loading 开始和结束,实现如下:
let count = 0;
export const startLoading = () => (dispatch: any) => {
if (count === 0) {
dispatch(setLoding(true));
}
count++;
};
export const endLoading = () => (dispatch: any) => {
count--;
if (count === 0) {
dispatch(setLoding(false));
}
};
使用
import myfetch from './myfetch.ts';
myfetch('/xxx/xxx')
.then(res => console.log(res))
myfetch('https://www.xxx.com/xxx/xxx')
.then(res => console.log(res))
myfetch('/xxx/xxx', {
methods: 'POST',
body: JSON.stringify({}),
})
.then(res => console.log(res))
myfetch('/xxx/xxx', {
methods: 'POST',
body: JSON.stringify({}),
noToastError: true,
noLoading: true,
})
.then(res => console.log(res))
基于 fetch 的请求封装的更多相关文章
- 简单的基于Vue-axios请求封装
具体实现思路=>封装之前需要用npm安装并引入axios,使用一个单独的js模块作为接口请输出对象,然后export dafult 这个对象. 1.首先我们需要在Vue实例的原型prototyp ...
- React Native 网络请求封装:使用Promise封装fetch请求
最近公司使用React作为前端框架,使用了异步请求访问,这里做下总结: React Native中虽然也内置了XMLHttpRequest 网络请求API(也就是俗称的ajax),但XMLHttpRe ...
- react-native fetch 请求封装
1.fetch 函数封装 fetch.js /** * 请求头 * @type {{Accept: string, Content-Type: string}} */ const header = { ...
- uniapp 基于 flyio 的 http 请求封装
之前写请求都是用别人封装好的,直接 import request 完事,自己第一次写还是一头雾水,学习了一波搞清楚了些,可以写简单的封装了. 首先要搞清楚为什么封装请求,同其他的封装一样,我们把不同请 ...
- 基于小程序请求接口 wx.request 封装的类 axios 请求
基于小程序请求接口 wx.request 封装的类 axios 请求 Introduction wx.request 的配置.axios 的调用方式 源码戳我 feature 支持 wx.reques ...
- WebApi系列~基于单请求封装多请求的设计
回到目录 怎么说,单请求封装多请求,这句话确实有点绕了,但还是要看清楚,想明白这到底是怎么一回事,单请求即一次请求(get,post,put,delete),封闭多请求,即在客户端发送的一个请求中可能 ...
- iOS开发之网络请求(基于AFNetworking的再封装)
最近一直很忙也没有什么时间写博客了.放假了休息一下,就写一篇博客来总结一下最近做项目中出现过的问题吧!!! 首先,在项目中我的起到了什么作用,无非就是把美工(UI设计师)给我们的图显示出来,然后再和服 ...
- webapi基于单请求封装多请求的设计【转】
怎么说,单请求封装多请求,这句话确实有点绕了,但还是要看清楚,想明白这到底是怎么一回事,单请求即一次请求(get,post,put,delete),封闭多请求,即在客户端发送的一个请求中可能包含多个子 ...
- fetch 如何请求数据
fetch 如何请求数据 在 传统Ajax 时代,进行 API 等网络请求都是通过XMLHttpRequest或者封装后的框架进行网络请求,然而配置和调用方式非常混乱,对于刚入门的新手并不友好 二 与 ...
随机推荐
- Liunx下使用wine容器实现跨平台使用软件
首先在Liunx中使用QQ,网易云音乐,等这些软件是很痛苦的,某些软件可能会有Liunx版本,但是像腾讯QQ早年前也提供过Linux版本,后来就下架了!!! 这里我以ubuntu18.04版本为列,讲 ...
- Java实现选号码
选号码 Description CF打算换个手机号码,但是他去营业厅选号码的时候却把移动的客服小姐烦得不行,因为他太挑三捡四啦. 对于一个手机号的后六位数字(前面五位他就无所谓了)CF有很严格的要求, ...
- Java实现LeetCode_0028_ImplementStrStr
package javaLeetCode.primary; import java.util.Scanner; public class ImplementStrStr_28 { public sta ...
- java实现SPFA算法
1 问题描述 何为spfa(Shortest Path Faster Algorithm)算法? spfa算法功能:给定一个加权连通图,选取一个顶点,称为起点,求取起点到其它所有顶点之间的最短距离,其 ...
- npm run dev启动项目,electron提示throw new Error('Electron failed to install correctly, please delete node_modules/electron and try installing again')
npm run dev 项目,提示 throw new Error('Electron failed to install correctly, please delete node_modules/ ...
- GitHub 热点速览 Vol.23:前后端最佳实践
作者:HelloGitHub-小鱼干 摘要:最佳实践,又名 best-practices,是 GitHub 常见的项目名,也是本周 Trending 关键词.25 年 Python 开发经验的 Dav ...
- Flask 的请求与响应
flask的请求与响应 from flask import Flask,request,make_response,render_template,redirect app = Flask(__nam ...
- min_25筛入门
目录 1.什么是min_25筛 2.前置知识 2.1.数论函数 2.2.埃拉托色尼筛 2.3.欧拉筛 3.min_25筛 3.1.计算质数贡献 3.2.计算总贡献 3.3.实现 4.例题 4.1.[L ...
- LR脚本信息函数-lr_get_master_host_name
lr_get_master_host_name() 返回Controller主机的名称. char * lr_get_master_host_name(); lr_get_master_host_na ...
- mysql HAVING用法
原文链接:https://www.cnblogs.com/mr-wuxiansheng/p/11188733.html having字句可以让我们筛选分组之后的各种数据,where字句在聚合前先筛选记 ...