一:简单参数

简单的参数,我们可以使用手动拼接的方式传递。

格式为:

fetch(url?key1=val1&key2=val2&...).then((response) => response.json())
.then((json) => {
//处理返回值
}).catch((error) => {
//异常处理
})

二:POST方法传递数据,在fetch方法的参数中定义post方法的参数们:method、headers、body

fetch(url', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
secondParam: 'secondValue',
})
})

三:复杂表单数据的传递,比如图片等

我们可以自己new一个FormData,直接传给body,在FormData中传递字节流实现上传图片的功能。

let formData = new FormData();
formData.append("key",表单内容); fetch(url , {
method: 'POST',
headers: {},
body: formData,
).then((response) => {
if (response.ok) {
return response.json();
}
).then((json) => {
alert(JSON.stringify(json));
).catch((error) => {
console.error(error);
);

ReactNative踩坑日志——fetch如何向服务器传递参数的更多相关文章

  1. ReactNative踩坑日志——使用async/await语法解决网络请求的异步导致的指令执行顺序错乱问题

    转载请注明原文地址: ReactNative的fetch是天然的异步请求,因此,如果你在一个代码块中使用了fetch,那么在执行的时候程序不会等待网络响应结束才执行下一条代码,而是会直接按顺序执行完整 ...

  2. ReactNative踩坑日志——OnPress随着render()执行被自动调用?

    在ReactNative中,Text.Button以及其他Touchable包装成的可点击控件,都可以通过onPress属性为其指定点击时的响应函数. 在有些情况下,我们会把这些点击函数先定义好,然后 ...

  3. ReactNative踩坑日志——代码执行方式(面向对象)

    在ReactNative中,是以面向对象的方式执行代码的.处于同一{}內的代码以对象的形式执行,也就是说,程序虽然会自上而下执行代码,但是它会保证当前整个代码块內的语句执行完毕才执行下一代码块. 举个 ...

  4. ReactNative踩坑日志——如何实现删除scrollview中的视图

    在reactNative中,页面是根据state值的变化来重新渲染的.因此,传统的前端开发中通过 id 来移除一个页面元素的做法在这里不适用. 一般,我们是通过遍历数组或map来渲染出scrollvi ...

  5. ReactNative踩坑日志——函数绑定this

    ES6语法定义的函数没有自动绑定this,所以在函数中使用了 this.xxx 就会报错,因为没有把类实例等this传进函数中. 有两种方法绑定this: 法1:在构造函数中为其他函数绑定this c ...

  6. ReactNative踩坑日志——页面跳转之——Undefined is not an Object(evaluating this2.props.navigation.navigate)

    页面跳转时,报  Undefined is not an Object(evaluating this2.props.navigation.navigate) 出错原因:在一个页面组件中调用了另一个组 ...

  7. react-native 踩坑记

    最近在使用react-native的时候遇到了很多坑,这里给大家分享下 一.样式 react-native 虽然支持flex布局,但是所有的样式均是css样式的一个很小的集合,尤其是在安卓机下问题尤为 ...

  8. React-Native 踩坑过程

    踩坑过程: 解决方法就是去 SDK Manager 把 23.0.1 的版本下载了 而如果报错信息中含有bintray.com.gradle.org等网址,请***,反复重试,或者去react nat ...

  9. ReactNative 踩坑小计

    使用ES6語法編寫Component時綁定事件需要用this.MethodName.bind(this),否則MethodName中無法使用this <TouchableHighlight on ...

随机推荐

  1. 管理Mysql常用指令

    知识会更新,数据库系统也一样,本文只保证对Mysql 5.7以及MariaDB 10有效. 编码篇 展示当前默认的编码和字符集 SHOW VARIABLES LIKE 'char%'; 修改服务器默认 ...

  2. 腾讯Bugly2015年移动应用质量大数据报告 原 荐

    在这份报告中,腾讯Bugly和腾讯优测会对2015年Android和iOS平台上的应用质量进行详细盘点,帮助你了解你的产品质量在行业中处于什么位置. 首先,让我们从整体上,回顾一下2015年度的应用和 ...

  3. [转]关于Infobright的数据导入

    FROM : http://www.mysqlsky.com/201109/infobright-data-load-error 题记 对于DW系统而言,庞大数据的迁移成本很高:所以导入和导出的速率及 ...

  4. MySql排名查询

    1.新建一张成绩表 -- 新建成绩表 CREATE TABLE IF NOT EXISTS `score` ( `id` ) NOT NULL AUTO_INCREMENT, `name` ) NOT ...

  5. RSA加密解密及RSA签名和验证及证书

    RSA加密解密及RSA签名和验证及证书 公钥是给别人的 发送密文使用公钥加密 验证签名使用公钥验证 私钥是自己保留的 接受密文使用私钥解密 发送签名使用私钥签名 上述过程逆转是不行的,比如使用私钥加密 ...

  6. how to fix bug in daily work

    0 QE will begin test the product when system is stable. so they may log a lot of issues, and our dai ...

  7. Chrome DevTools — Network

    Chrome DevTools — Network https://segmentfault.com/a/1190000008407729 chrome DevTools的各种使用: 在dev too ...

  8. 逻辑回归应用之Kaggle泰坦尼克之灾

    机器学习系列(3)_逻辑回归应用之Kaggle泰坦尼克之灾 标签: 机器学习应用 2015-11-12 13:52 3688人阅读 评论(15) 收藏 举报 本文章已收录于:  机器学习知识库  分类 ...

  9. Javascript常用语法 (一)

    判断成员是否是一个函数: if (typeof options.sourceMapName === 'function') { mapNameGenerator = options.sourceMap ...

  10. mysql 批量数据循环插入

    双重循环插入 DELIMITER ;; CREATE PROCEDURE test_insert() BEGIN DECLARE a INT DEFAULT 1; DECLARE b TINYINT ...