关于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>