前言: Fetch 提供了对 Request 和 Response 等对象通用的定义。 
发送请求或者获取资源,需要使用 fetch() 方法。

具体使用代码:

<script>
fetch("地址",{method:"请求方式"}).then(function (res) {    //将异步数据res处理成text(转成json),
res.text().then(function (value) {
console.log(value);
})
})
</script>

示例:

get请求:

            fetch("url", {
method: "get"
}).then(function(resp) {
//将服务器响应回来的内容 序列化成 json格式 使用text()也可以
resp.json().then((data) => {
// data -> 数据
})
});

post请求:

            var arr1 = [{
name: "天皇盖地虎",
detail:"宝塔镇河妖"
}];
fetch("url", {
method: "post",
headers: {//设置请求的头部信息
"Content-Type": "application/json"
//跨域时可能要加上
//"Accept":"allication/json"
}, //将arr1对象序列化成json字符串
body: JSON.stringify(arr1)//向服务端传入json数据
}).then(function(resp) {
resp.json().then((data) => { })
});

Fetch(原生)的简单使用的更多相关文章

  1. 原生JS简单的无缝自动轮播

    最近在不断的加强巩固js.在学习jq和vue之后发现很多东西其实都是不明所以,有些底层的东西自己不懂,到头来也只是一昧的使用,一直在用别人的东西,对自己的成长帮助也不大. 万丈高楼平地起,基础打扎实了 ...

  2. wcf第4步之原生调用简单封装

    public interface IDemoServiceChannel : IDemoService, System.ServiceModel.IClientChannel { } public p ...

  3. 手把手原生js简单轮播图

    在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...

  4. 原生js简单调用百度翻译API实现的翻译工具

    先来个在线demo: js翻译工具 或者百度搜索js简单调用百度翻译API工具(不过有个小小的界面显示bug,我想细心的人应该会发现) 或者直接前往该网址:js翻译工具 或者前往我的github:gi ...

  5. 原生js简单轮播图 代码

    在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...

  6. 原生js简单实现拖拽效果

    实现弹窗拖拽效果的原理是:按下鼠标并移动——拖拽移动物体,抬起鼠标——停止移动.主要触发三个事件:onmousedown.onmousemove以及onmouseup: 首先搭建结构:一个宽350px ...

  7. 原生js简单实现双向数据绑定原理

    根据对象的访问器属性去监听对象属性的变化,访问器属性不能直接在对象中设置,而必须通过 defineProperty() 方法单独定义. 访问器属性的"值"比较特殊,读取或设置访问器 ...

  8. 用原生js简单模仿angular的依赖注入

    大家都知道angular 依赖注入很神奇,跟我们平常写代码的风格思维差别很大,不过仔细分析确是一个很有意思的东西,依赖注入早期也叫依赖倒置,是java中有的.废话不多少直接上例子 本帖属于原创,转载请 ...

  9. 原生 js 简单实现 Promise

    写在思否,欢迎各位大佬给出建议: https://segmentfault.com/a/1190000018530433

  10. php原生导出简单word表格(TP为例) (原)

      后台: # 菲律宾名单word导出 public function export_word(){ $tids = $_GET['tids']; $userinfo=M("philippi ...

随机推荐

  1. Gym - 100989 L / M 【dfs / dp】

    题目链接:http://codeforces.com/gym/100989/problem/L / http://codeforces.com/gym/100989/problem/M 题目大意:给定 ...

  2. (5.14)mysql高可用系列——级联复制与多主一从

    目录: [0]实验需求 级联复制,201为主库,202为从库/同时为203的主库,203为202的从库[1]实验环境 级联:A->B->C 实践思路: (1)直接拿A的xtrabackup ...

  3. Oracle-DQL 7- 集合操作

    集合操作: --将查询结果看作是一个集合,可以将多个查询结果之间用集合操作找出特点的数据--很多的集合操作可以使用条件的组合进行代替,集合操作的效率高于条件组合--某些复杂的查询结果只能通过集合操作得 ...

  4. gRPC 本地服务搭建

    RPC RPC 原理 主流 RPC 框架 gRPC 概述 特点 服务端创建 定义服务 生成 gRPC 代码 服务端实现 客户端实现 踩坑记录 源码 RPC RPC 原理 RPC 框架的目标就是让远程服 ...

  5. 「java.util.concurrent并发包」之 CountDownLatch

    一 CountDownLatch是什么 CountDownLatch是在java1.5被引入的,跟它一起被引入的并发工具类还有CyclicBarrier.Semaphore.ConcurrentHas ...

  6. Elastic Search常用元数据简介

    在ES中,除了定义的index,type,和管理的document外,还有若干的元数据.这些元数据用于记录ES中需要使用的核心数据.在ES中,元数据通常使用下划线’_’开头. 1 查看数据GET /i ...

  7. java的Thread Dump诊断工具

    1.1什么是Thread Dump? Thread Dump是非常有用的诊断Java应用问题的工具.每一个Java虚拟机都有及时生成所有线程在某一点状态的thread-dump的能力,虽然各个 Jav ...

  8. 1-Perl 简介

    Perl 是 Practical Extraction and Report Language 的缩写,可翻译为 "实用报表提取语言".Perl 是高级.通用.直译式.动态的程序语 ...

  9. Spring Boot WebFlux整合mongoDB

    引入maven文件 <dependency> <groupId>org.springframework.boot</groupId> <artifactId& ...

  10. Delphi 画布对象

    樊伟胜