React封装fetch的get与post请求
2023-09-11 14:19:06 时间
新建http.js文件用来封装get和post请求
1、封装get请求
2、封装post请求
3、测试
首先在其他组件引入,注意:分析
引入类和方法的区别: React等类直接写即可 方法需要在外面用{}包围
封装之前写法
封装完成后调用httpPost写法,这里data为对象格式即可
get方法与之类似
小结:封装完整代码如下
// 封装get请求 export function httpGet(url){ var result = fetch(url) return result } // 封装post请求 export function httpPost(url,data){ var result = fetch(url,{ method:'post', headers:{ 'Accept':'application/json,text/plain,*/*',/* 格式限制:json、文本、其他格式 */ 'Content-Type':'application/x-www-form-urlencoded'/* 请求内容类型 */ }, //data表单数据,body最终要的格式为username=tony&pwd=123456,所以需要格式化 body:paramsPostBody(data) }) return result } //格式化data function paramsPostBody(obj){ var result = '';//接受最后结果 var item; for(item in obj){ result += '&'+item+'='+encodeURIComponent(obj[item]) } if(result){ result = result.slice(1)//去掉第一个& } return result }
。
相关文章
- koa 基础(二十二)封装 DB 库 --- 测试
- react-native 封装 VedioPlayer 组件
- react-native ListView 封装 实现 下拉刷新/上拉加载更多
- 微信小程序 - 函数防抖 / 函数节流(轮子封装)
- axios的封装,响应拦截器的实例
- Java 封装
- SwiftUI 既优雅又好用的封装库 数行代码快速整合UIKit组件 (教程含源码)
- macOS SwiftUI 封装组件之 可选择可复制文本标签NSTextField(教程含源码)
- react路由、NavLink组件封装
- React魔法堂:echarts-for-react源码略读
- Unity 工具 之 简单 镭射 Laser Ray 交互的封装可交互物体 GameObject 和 UI(结合 Curved UI)基于/可用于眼镜插手机上交互
- 基于OpenCV封装官方Affine-SIFT源码