关于fetch api这点事

fetch

fetch api
文档地址
模拟登录demo

fetch api

fetch api 是浏览器的异步可跨域请求。基于XMLHttpRequest, 也就是对原生Ajax请求的包装，以回调的形式展开。

使用方法：

fetch('http://example.com/movies.json').then(function(response) {return response.json();}).then(function(myJson) {console.log(myJson);});

文档地址

https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

模拟登录demo

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body style="width: 100%; height: 100%;"><div><img src="" /><br /><label></label><br /><textarea id="token" style="width: 400px; height: 60px;"></textarea></div><div><form id="loginForm" name="loginForm">code: <input name="code" /> <br />username: <input name="username" /> <br />password: <input name="password" type="password" /> <br />uuid: <input name="uuid" /> <br /><input type="button" onclick="doLogin()" value="login" /></form></div><script>// https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetchfunction doLogin() {console.log('start login..')let form = document.getElementById("loginForm");console.log(form.code.value)let code = form.code.value;let uuid = form.uuid.value;let username = form.username.value;let password = form.password.value;let data = {uuid, code, username, password }var req = new Request("http://localhost:9999/login")var init = {method: 'POST',mode: 'cors',body: JSON.stringify(data),headers: {'content-type': 'application/json'}}fetch(req, init).then(res => res.json()).then(res => {console.log(res)document.getElementById("token").innerText = res.token;})}var myImage = document.querySelector('img');var myHeaders = new Headers();myHeaders.append('Content-Type', 'image/jpeg');var myInit = {method: 'GET',headers: myHeaders,mode: 'cors',cache: 'default'};// 获取验证码var myRequest = new Request('http://localhost:9999/captchaImage');fetch(myRequest, myInit).then(function (response) {return response;}).then(res => {return res.json();}).then(res => {console.log(res)myImage.src = 'data:image/png;base64,' + res.img;document.querySelector("label").innerText = res.uuid;});</script>
</body></html>

关于fetch api这点事相关推荐

深入浅出Fetch API
多年来,XMLHttpRequest一直是web开发者的亲密助手.无论是直接的,还是间接的, 当我们谈及Ajax技术的时候,通常意思就是基于XMLHttpRequest的Ajax,它是一种能够有效改进 ...
如何使用浏览器对网络请求编辑重发(Edit and Resent) 以及： fetch API 中 ReadablleStream 的打印方法
文章目录需求火狐浏览器-编辑重发(Edit and Resent) fetch API Links 需求上网用F12分析一个请求,调用的事服务端的一个数据接口. 想修改请求参数(请求头.请求体, ...
使用JavaScript Fetch API发送HTTP请求
介绍 JavaScript的Fetch API允许我们发送HTTP请求.自从ECMAScript 2015(通常称为ES6)被引入并使用Promises以来,它一直是JavaScript的标准部分. ...
Fetch API 初步解读
文 | Leigh,UPYUN 已获得授权微信文章链接:http://t.cn/R4afStO 在我们日常的前端开发中,XMLHttpRequest 是必不可少会遇到的一个东东.XHR 最初是由微软 ...
Fetch API HTTP请求实用指南
本次将介绍如何使用Fetch API(ES6 +)对REST API的 HTTP请求,还有一些示例提供给大家便于大家理解. 注意:所有示例均在带有箭头功能的 ES6中给出. 当前的Web /移动应用程 ...
Fetch API——简化你的AJAX
之前搞定了Promise,接下来学习Fetch API.封装过AJAX函数的各位肯定能知道XMLHttpRequest的问题(没有封装过的点这里),首先,其所有的功能全部集中在同一对象上,容易书写混乱 ...
什么是 Web API 中的 background fetch API
在为 Web 编写代码时,有大量可用的 Web API.这个网站列出了您在开发 Web 应用程序或站点时可以使用的所有 API 和接口(对象类型). Web API 通常与 JavaScript 一起 ...
ES6 Fetch API和Cookie相关的知识点
Jerry Wang曾经写过一篇比较web应用处于stateful和stateless不同状态下的行为差异,发表在SAP社区上: https://blogs.sap.com/2017/03/31/st ...
使用fetch封装请求_关于如何使用Fetch API执行HTTP请求的实用ES6指南
使用fetch封装请求 In this guide, I'll show you how to use the Fetch API (ES6+) to perform HTTP requests to ...

关于fetch api这点事

fetch

fetch api

文档地址

模拟登录demo

关于fetch api这点事相关推荐

最新文章

热门文章