大家好，欢迎来到IT知识分享网。
介绍
feach是浏览器内置的api, 用于发送网络请求
请求方式对比
- AJAX: 基于XMLHttpRequest接收请求, 使用繁琐
- Axios: 基于Promise的请求客户端, 在浏览器和node中均可使用, 使用简单
- fetch: 浏览器内置的api, 基于Promise, 功能简单
基础语法
<body> <button>发请求</button> <script> document.querySelector('button').addEventListener('click',async function(){ // 1.构建查询参数 const search = new URLSearchParams({pname: '广东省', cname:'深圳市'}).toString() // 2.发请网络请求 (默认get) const res = await fetch('http://hmajax.itheima.net/api/area?'+ search) // 3.判断请求状态 if(res.status >= 200 && res.status < 300) { // 4.获取成功结果 (返回promise) const data = await res.json() console.log(data); } else { // 5.处理请求错误 console.log(res.status); } }) </script> </body>提交表单
<body> <!--选择图片 --> <input type="file" > <!-- 回显图片 --> <img src="" alt=""> <script> document.querySelector('input').addEventListener('change', async function(){ // 1.准备表单数据 const file = this.files[0] const data = new FormData() data.append('img', file) // 2.发起网络请求 (自动设置请求头) const res = await fetch('http://hmajax.itheima.net/api/uploadimg', { method: 'POST', body: data }) // 3.判断请求状态 if(res.status >=200 && res.status <300) { const { data } = await res.json() console.log(data); // 4.回显图片 document.querySelector('img').src = data.url } else { // 5.处理失败 console.log('请求失败', res.status); } }) </script> </body>提交JSON
<body> <button>提交表单数据</button> <script> document.querySelector('button').addEventListener('click',async function(){ // 1.实例化Headerw对象 const headers = new Headers() // 2.设置请求头 headers.append('content-type','application/json') // 3.发起请求 const res = await fetch('http://hmajax.itheima.net/api/register',{ method:'POST', headers, body: JSON.stringify({ username: 'itheima7777', password:'' }) }) // 4.处理请求结果 if(res.status >=200 && res.status <300) { const data = await res.json() console.log(data) } }) </script> </body>兼容性
如果需要兼容ie 10+, 可以使用 promise-polyfill 和 whatwg-fetch 两个库做兼容处理
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/122393.html
