找网站做网站做网站,哈密网站建设公司哪家专业,徐州网站开发培训,有了网站开发app是不是更容易介绍
feach是浏览器内置的api, 用于发送网络请求 请求方式对比
AJAX: 基于XMLHttpRequest接收请求, 使用繁琐Axios: 基于Promise的请求客户端, 在浏览器和node中均可使用, 使用简单fetch: 浏览器内置的api, 基于Promise, 功能简单 基础语法
bodybutton发请求…介绍
feach是浏览器内置的api, 用于发送网络请求 请求方式对比
AJAX: 基于XMLHttpRequest接收请求, 使用繁琐Axios: 基于Promise的请求客户端, 在浏览器和node中均可使用, 使用简单fetch: 浏览器内置的api, 基于Promise, 功能简单 基础语法
bodybutton发请求/buttonscriptdocument.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 typefile !-- 回显图片 --img src altscriptdocument.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
bodybutton提交表单数据/buttonscriptdocument.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:123456})})// 4.处理请求结果if(res.status 200 res.status 300) {const data await res.json()console.log(data)}})/script
/body 兼容性
如果需要兼容ie 10, 可以使用 promise-polyfill 和 whatwg-fetch 两个库做兼容处理
