Web: fetch API
2023-09-11 14:16:16 时间
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script src="d.js"></script> <div id="root"> </div> </body> </html
async function getData() { const url = 'http://jsonplaceholder.typicode.com/posts' const response = await fetch(url) console.log(response) const posts = await response.json() console.log(posts) const root = document.querySelector('#root') const ul = document.createElement('ul') posts.forEach(post => { const li = document.createElement('li') const a = document.createElement('a') a.appendChild(document.createTextNode(post.title)) a.setAttribute('href', `${url}/${post.id}`) li.appendChild(a) ul.appendChild(li) }) root.appendChild(ul) } getData()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button>btn</button> <img> <script> const url = 'https://dog.ceo/api/breeds/image/random' // const promise = fetch(url) console.log(promise) // promise.then(response => { // console.log(response instanceof Response) // console.log(response) // console.log(response.body) // // console.log(response.json()) // return response.json() // }).then(data => console.log(data)) const button = document.querySelector('button') const img = document.querySelector('img') button.addEventListener('click', () => { fetch(url) .then(response => { console.log('response:', response) if(response.ok) { return response.json() } throw new Error('error!') }) .then(data => img.src = data.message) }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button>btn</button> <input type="text" placeholder="name"> <script> const button = document.querySelector('button') const input = document.querySelector('input') button.addEventListener('click', () => { fetch('http://jsonplaceholder.typicode.com/users', { method: 'post', body: JSON.stringify({ name: input.value }), headers: { 'Content-Type': 'application/json' } }).then(response => { if(response.ok) { return response.json() } throw new SyntaxError('error!') }).then(data => console.log(data)) } ) </script> </body> </html>
相关文章
- ASP.NET WEB API 调试
- HTML5 Web Audio API实现【董小姐】播放
- 《ASP.NET MVC4 WEB编程》学习笔记------Web API 续
- 《ASP.NET MVC4 WEB编程》学习笔记------Web API
- 02-Twisted 构建 Web Server 的 Socket 长链接问题 | 07.杂项 | Python
- 【python】web开发
- 记一次web登录通杀渗透测试
- loadrunner12.55:常用函数汇总说明之Web Vuser Functions(WEB)参数函数
- 新作《ASP.NET Web API 2框架揭秘》正式出版
- 总体介绍ASP.NET Web API下Controller的激活与释放流程
- [ASP.NET Web API]如何Host定义在独立程序集中的Controller
- Self Host模式下的ASP. NET Web API是如何进行请求的监听与处理的?
- ASP.NET Web API路由系统:Web Host下的URL路由
- 什么是 Web API 中的 background fetch API
- 【LINK】手机Web开发框架
- Atitit.常用语言的常用内部api 以及API兼容性对源码级别可移植的重要性 总结
- .NET MVC第八章、Web Api 跨域接口
- 基于JAVA实现的WEB端UI自动化 - WebDriver高级篇 - 验证码处理
- React.js 集成 Kotlin Spring Boot 开发 Web 应用实例详解
- Web API 强势入门指南(转)
- VS2010发布ASP.NET WEB应用程序
- 基于JAVA实现的WEB端UI自动化 - WebDriver框架篇 - Jenkins[定时计划执行任务]