最近项目用到了一些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+'&param2='+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
  3,POST带参数)提交正常表单formData格式的数据到服务器:
提交格式为:

 <form action="。。。url地址。。。" method="post">
<input type=''text" name="name" value="认识c语言">
<input type=''text" name="cp_weight" value="0">
</form>
  4,POST带参数)fetch提交自定义表单formData格式的数据到服务器:
(在fetch下使用FormData对form表单元素进行数据封装后进行post提交至服务器,其格式被转为了WebKitFormBoundary模式,如下图)    

如果需要使用正常的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()函数使用的一些技巧的更多相关文章

  1. TypeScript开发ReactNative之fetch函数的提示问题

    使用TypeScript开发ReactNative时,发现在类中调用 fetch 函数时IDE可能会提示找不到,无法加载,特别是当类中存在同名的 fetch 成员方法时更是郁闷了,虽然程序是可以执行的 ...

  2. reactNative-解决react native使用fetch函数 Network request failed 问题

    解决react native使用fetch函数Network request failed问题 最近公司新开发一个app, 用react native架构好后,用xcode模拟器打开app,对接登陆接 ...

  3. MySQL的随机数函数rand()的使用技巧

    咱们学php的都知道,随机函数rand或mt_rand,可以传入一个参数,产生0到参数之间的随机整数,也可以传入两个参数,产生这两个参数之间的随机整数. 而在mysql里,随机数函数rand不能传参, ...

  4. php学习零散笔记—字符串分割、fetch函数和单双引号。

    1 字符串分割——split()函数和preg_split()函数 split — 用正则表达式将字符串分割到数组中——貌似PHP5.3以上已不赞成使用 array split ( string $p ...

  5. ES6 fetch函数与后台交互

    最近在学习react-native,遇到调用后端接口的问题.看了看官方文档,推荐使用es6的fetch来与后端进行交互,在网上找了一些资料.在这里整理,方便以后查询. 1.RN官方文档中,可使用XML ...

  6. C# 5.0 Async函数的提示和技巧

    一.创建Async函数 Async是C# 5.0中新增的关键字,通过语法糖的形式简化异步编程,它有如下三种方式: async Task<T> MyReturningMethod { ret ...

  7. JavaScript 函数(方法)的封装技巧要领及其重要性

    作为一枚程序猿,想必没有人不知道函数封装吧.在一个完整的项目开发中,我们会在JS代码中对一些常用(多个地方调用)的操作进行一个函数的封装,这样便于我们调试和重复调用,以致于能够在一定程度上减少代码的冗 ...

  8. api日常总结:前端常用js函数和CSS常用技巧

    我的移动端media html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font- ...

  9. js中字符替换函数String.replace()使用技巧

    定义和用法 replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串. 语法 stringObject.replace(regexp/substr,replac ...

随机推荐

  1. org.hibernate.TransientObjectException:The given object has a null identifier

    1.错误描述 org.hibernate.TransientObjectException:The given object has a null identifier:com.you.model.U ...

  2. C#异常处理--C#基础

    try...catch:捕获异常try...finally:清除异常try..catch...finily:处理所有异常 1.捕获异常 using System; using System.Colle ...

  3. JavaScript的那些事儿

    关于JavaScript的对象数据类型: Object 定义一个对象类型: 例如:var person=new Object(): 当然在建立对象以后我们可以为他添加属性, 如: <script ...

  4. Poj3321 Apple tree

    翻译: 卡卡屋前有一株苹果树,每年秋天,树上长了许多苹果.卡卡很喜欢苹果.树上有N个节点,卡卡给他们编号1到N,根的编号永远是1.每个节点上最多结一个苹果.卡卡想要了解某一个子树上一共结了多少苹果. ...

  5. 通过logstash-input-mongodb插件将mongodb数据导入ElasticSearch

    目的很简单,就是将mongodb数据导入es建立相应索引.数据是从特定的网站扒下来,然后进行二次处理,也就是数据去重.清洗,接着再保存到mongodb里,那么如何将数据搞到ElasticSearch中 ...

  6. angularjs中的下拉框默认选中

    1.  ng-init  属性: <!DOCTYPE html> <html> <head> <meta charset="utf-8"& ...

  7. autobase之配置文件

    配置文件内容: 1.db_info{},数据库链接属性,包括Oracle,dmdb,快立方 2.credit etc目录的路径 3.批量基础数据导入sql路径 4.用例执行日志存储目录路径 功能: 1 ...

  8. GeoJSON C#判断某一点是否在某一区域范围之内

    GeoJSON是一种对各种地理数据结构进行编码的格式,基于Javascript对象表示法的地理空间信息数据交换格式.GeoJSON对象可以表示几何.特征或者特征集合.GeoJSON支持下面几何类型:点 ...

  9. 基于规则评分的密码强度检测算法分析及实现(JavaScript)

    简言 用正则表达式做用户密码强度的通过性判定,过于简单粗暴,不但用户体验差,而且用户帐号安全性也差.那么如何准确评价用户密码的强度,保护用户帐号安全呢?本文分析介绍了几种基于规则评分的密码强度检测算法 ...

  10. linq使用字符串参数排序

    今天找了半天资料,有两种种方法: 1.把字符串参数变为lambda表达式 2.使用System.Linq.dynamic引用 这里我讲第二种方法 第一步:nuget搜索关键字"dynamic ...