小白快速使用fetch与后端交互
本人专心后端,但在完成页面碰到了交互,选择了fetch来完成,
总结了一下简单的使用fetch的方法。
fetch是纯原生JS与后端交互的方法,请注意,Fetch规格不同于jQuery.ajax(),主要体现在两个方面:
- 即使响应是HTTP 404或500,从 fetch() 返回的Promise也不会拒绝HTTP错误状态。相反,它将正常解析(ok状态设置为false),并且它只会在网络故障时拒绝,或者如果任何东西阻止了请求的完成
- 默认情况下, 如果站点依靠维护用户会话(发送cookie,必须设置credentials init选项),则fetch不会发送或接收来自服务器的任何cookie,从而导致未经身份验证的请求。
使用如下的Js代码,即可请求到相关的接口,data是作者自己定的名称,相当于参数,可以修改
//储存得到的数据
var myJson;
fetch('/users.html')
.then(function(response) {
return response.json()
}).then(function(data) {
myJson=data;
})
如果需要添加请求的json,或者更多的定制请求,稍加修改即可
fetch('/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: 'Hubot',
login: 'hubot',
})
})
小白快速使用fetch与后端交互的更多相关文章
- springboot+mybatis+thymeleaf项目搭建及前后端交互
前言 spring boot简化了spring的开发, 开发人员在开发过程中省去了大量的配置, 方便开发人员后期维护. 使用spring boot可以快速的开发出restful风格微服务架构. 本文将 ...
- AJAX-前后端交互的艺术
AJAX-前后端交互的艺术 为什么要用AJAX? 当我们通过提交表单向服务器提交内容,或者进行一些其他操作,均涉及到了与浏览器之间的交互,传统的方式与AJAX方式的处理方法是不同的 传统方式:用户触发 ...
- js前后端交互
1.前后端交互模式 2.promise用法 (1)异步调用 (2)ajax回顾 (3).promise 优点:可以解决回调地狱(多层异步调用嵌套问题)(解决代码可读性低的问题) 提供简洁的api (4 ...
- Vue - 与后端交互
零:与后端交互 - ajax 版本1 - 出现了跨域问题 前端:index.html <!DOCTYPE html> <html lang="en"> &l ...
- Vue之前后端交互
Vue之前后端交互 一.前后端交互模式 接口调用方式 原生ajax 基于jQuery的ajax fetch axios 异步 JavaScript的执行环境是「单线程」 所谓单线程,是指JS引擎中负责 ...
- 三、vue前后端交互(轻松入门vue)
轻松入门vue系列 Vue前后端交互 六.Vue前后端交互 1. 前后端交互模式 2. Promise的相关概念和用法 Promise基本用法 then参数中的函数返回值 基于Promise处理多个A ...
- 窗口 - dialog - 与后端交互
与后端交互,一般需要提交表单数据,所以,这次渲染得dialog其实是一个<form> <form id="loginForm"> <table ali ...
- Node之简单的前后端交互
node是前端必学的一门技能,我们都知道node是用的js做后端,在学习node之前我们有必要明白node是如何实现前后端交互的. 这里写了一个简单的通过原生ajax与node实现的一个交互,刚刚学n ...
- Django之META与前后端交互
Django之META与前后端交互 1 提交表单之GET 前端提交数据与发送 1)提交表单数据 2)提交JSON数据 后端的数据接收与响应 1)接收GET请求数据 2)接收POST请求数据 3)响应请 ...
随机推荐
- 一起了解 .Net Foundation 项目 No.15
.Net 基金会中包含有很多优秀的项目,今天就和笔者一起了解一下其中的一些优秀作品吧. 中文介绍 中文介绍内容翻译自英文介绍,主要采用意译.如与原文存在出入,请以原文为准. NUnit Test Fr ...
- 将url转化成file文件
let img = "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=508387608,28489740 ...
- 利用Java实现指定文件夹下的照片以自定义格式移动
前几天本猿的大学同学,一个漂亮的小姐姐工作时遇到了一个问题,她的需求是,在公司局域网的电脑上下载大量的图片重命名成指定得1.2.3.....以此类推,需要当天完成,我就临时给写了一个小demo. 我的 ...
- 1构建个人博客--使用Hugo快速成型
概述 人在武汉,病毒肆虐. 隔离久了,有点闷,闲余时间找点事情做. 建个博客吧, 内容不重要,写不写也不那么要紧,目前水平也写不出什么有深度的东西. 但是这个姿势一定要优美, 过程一定要折腾. OK, ...
- 你知道吗,Flutter内置了10多种Button控件
注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 Flutter内置了10多种Button(按钮)类控件供我 ...
- python第一次作业
import turtle turtle.pensize(2) turtle.pencolor("black") turtle.fillcolor("red") ...
- 为什么vue中的data用return返回呢?
不使用return包裹的数据会在项目的全局可见,会造成变量污染:使用return包裹后数据中变量只在当前组件中生效,不会影响其他组件. 当一个组件被定义, data 必须声明为返回一个初始数据对象的函 ...
- Hadoop集群搭建(四)~centos6.8关闭防火墙
一.centos关闭防火墙 1,关闭防火墙.service iptables stop 2,关闭防火墙开机自启.chkconfig iptables off 3,查看防火墙状态.service ipt ...
- 五分钟完成 ABP vNext 通讯录 App 开发
五分钟完成 ABP vNext 通讯录 App 开发 ABP vNext(后文简称Abp)是 Volo 公司堪称艺术品级的应用开发框架,它基于领域驱动设计(DDD)的思维,创新地采用了模块化的设计.A ...
- File的功能--> 获取功能-->所有的根目录 | 创建文件功能,但是如果文件已经存在-->不再创建(新手)
//导入的包.import java.io.File;import java.io.FileFilter;import java.io.IOException; // 获取功能-->所有的根目录 ...