fetch()函数使用的一些技巧
最近项目用到了一些es6的知识,其中大篇幅在vue框架中使用了fetch()函数,总结了一些使用的技巧:
一,
1,POST带参数)fetch提交json格式的数据到服务器:
//fetch替换vue-resource
let jsonData= {
params1:'param1_value',
params2:'param2_value'
};
6 fetch(
url(地址),
{
9 method: 'POST',
10 credentials: 'include',
11 headers: {(添加头文件)
'Content-Type': 'application/json;charset=UTF-8'(指定数据类型和编码),
'Authorization': 'Bearer ' + localStorage.access_token(在请求信息中添加assess_token验证码),
},
body: JSON.stringify(jsonData),
}
17 ).then(function(res){
18 return res.json().then((data)=>{(返回的res为原生Promise对象,需要转换)
19 console.log(data)
20 })
});
//end fetch替换vue-resource
2,GET带参数)fetch提交json格式的数据到服务器:
params1='param1_value' ; params2='param2_value' ;
3
let url = 'http://www.cnblogs.com'+'?param1='+param1_value+'¶m2='+param2_value; (get方式只能把参数拼接到url地址中进行传递)
5
6 fetch(
url(地址),
{
9 method: 'GET',
10 credentials: 'include',
11 headers: {(添加头文件)
'Content-Type': 'application/json;charset=UTF-8'(指定数据类型和编码),
'Authorization': 'Bearer ' + localStorage.access_token(在请求信息中添加assess_token验证码),
},
}
17 ).then(function(res){
18 return res.json().then((data)=>{(返回的res为原生Promise对象,需要转换)
19 console.log(data)
20 })
});
//end fetch替换vue-resource
<form action="。。。url地址。。。" method="post">
<input type=''text" name="name" value="认识c语言">
<input type=''text" name="cp_weight" value="0">
</form>
如果需要使用正常的formData格式提交,代码如下:
let formData = new FormData();
formData.append('name' , '认识c语言');
formData.append('cp_weight' , '0');
fetch('url地址',{
method: 'POST',
credentials: 'include',
headers: {
// 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',(这一句一定不能加,很多人容易忽略这个地方,否则就是上图的WebKitFormBoundary格式数据)
'Authorization': 'Bearer ' + localStorage.access_token,
},
body: formData,
}).then(function(res){
return res.json().then((data)=>{
console.log(data);
})
});
fetch()函数使用的一些技巧的更多相关文章
- TypeScript开发ReactNative之fetch函数的提示问题
使用TypeScript开发ReactNative时,发现在类中调用 fetch 函数时IDE可能会提示找不到,无法加载,特别是当类中存在同名的 fetch 成员方法时更是郁闷了,虽然程序是可以执行的 ...
- reactNative-解决react native使用fetch函数 Network request failed 问题
解决react native使用fetch函数Network request failed问题 最近公司新开发一个app, 用react native架构好后,用xcode模拟器打开app,对接登陆接 ...
- MySQL的随机数函数rand()的使用技巧
咱们学php的都知道,随机函数rand或mt_rand,可以传入一个参数,产生0到参数之间的随机整数,也可以传入两个参数,产生这两个参数之间的随机整数. 而在mysql里,随机数函数rand不能传参, ...
- php学习零散笔记—字符串分割、fetch函数和单双引号。
1 字符串分割——split()函数和preg_split()函数 split — 用正则表达式将字符串分割到数组中——貌似PHP5.3以上已不赞成使用 array split ( string $p ...
- ES6 fetch函数与后台交互
最近在学习react-native,遇到调用后端接口的问题.看了看官方文档,推荐使用es6的fetch来与后端进行交互,在网上找了一些资料.在这里整理,方便以后查询. 1.RN官方文档中,可使用XML ...
- C# 5.0 Async函数的提示和技巧
一.创建Async函数 Async是C# 5.0中新增的关键字,通过语法糖的形式简化异步编程,它有如下三种方式: async Task<T> MyReturningMethod { ret ...
- JavaScript 函数(方法)的封装技巧要领及其重要性
作为一枚程序猿,想必没有人不知道函数封装吧.在一个完整的项目开发中,我们会在JS代码中对一些常用(多个地方调用)的操作进行一个函数的封装,这样便于我们调试和重复调用,以致于能够在一定程度上减少代码的冗 ...
- api日常总结:前端常用js函数和CSS常用技巧
我的移动端media html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font- ...
- js中字符替换函数String.replace()使用技巧
定义和用法 replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串. 语法 stringObject.replace(regexp/substr,replac ...
随机推荐
- directX--关于CSource和CSourceStream (谁调用了fillbuffer)
CSourceStream类,是CSource类的OutputPin[source.h/source.cpp]派生自CAMThread和CBaseOutputPinl 成员变量: CS ...
- C# MVC的一种高效分页的html方法
首先创建一个html的扩展方法,这个方法是万能的,可以直接拿到您的项目中使用: //主要就是输出分页的超级链接的标签 //自定义分页Helper扩展 public static HtmlString ...
- 解决无法同步 OneNote 的问题
在本地创建的笔记本,无法共享到云端,显示无法连接onedrive. 关闭改笔记本,重新连接共享. 参考: https://support.office.com/zh-cn/article/%E8%A7 ...
- 试着讲清楚:js代码运行机制
一. js运行机制 js执行引擎 经常看文章的说到js是带线程的,其实这个说法非常的模糊,准确的是js执行引擎是单线程的,js执行引擎就是js代码的执行器,有了这个概念就可以下来说说js是如何运行的了 ...
- Groovy实现原理分析——准备工作
欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://g ...
- SAXParser解析xml文件
对于xml的解析,这里学习并演示使用SAXParser进行解析的样例. 使用此种方法无法解析"gb2312"编码的xml文件,因此,此处xml文件编码设置为"UTF-8& ...
- github上的文件比对
Skip to content This repository Pull requests Issues Marketplace Explor ...
- 【BZOJ3924】幻想乡战略游戏(动态点分治)
[BZOJ3924]幻想乡战略游戏(动态点分治) 题面 权限题...(穷死我了) 洛谷 题解 考虑不修改 发现一个贪心的做法 假设当前放在当前位置 如果它有一个子树的兵的总数大于总数的一半 那么,放到 ...
- 环境变量配置为jdk8,显示的java版本为jdk7
经查找发现是jdk版本的问题,我系统环境变量配置的是jdk7,可是这个war包需要在jdk8的环境下运行.于是我就手动将环境变量的jdk7换成jdk8,结果发现依然还是会出现以上问题.于是我打开cmd ...
- 关于OPC UA Helper 命名空间中的OpcUaClient 类中的订阅函数的更改
原函数是opcUaClient.MonitorValue("ns=4;s=MAIN.d", new Action<double, Action>(MonitorTest ...