JS详解-fetch核心语法

 document.querySelector('.btn').addEventListener('click',async () => {const p =  new URLSearchParams({pname:'浙江省',cname:'杭州市'})//1、如何请求？默认为get，参数1 url地址，返回promiseconst res = await fetch('http://hmajax.itheima.net/api/area?'+p.toString())if(res.status >= 200 && res.status < 300){//2、如何处理响应(JSON),.json方法解析json返回promiseconst data = await res.json()}else{//3、处理异常console.log('请求异常',res.status)}})

fetch提交FormData：

        document.querySelector('.ipt').addEventListener('change',async function(){// querySelector获取的是一个dom对象，files是一个文件列表，[0]是第一个文件const img = this.files[0]// 创建一个formdata对象const data = new FormData()data.append('img',img)const res = await fetch('http://hmajax.itheima.net/api/uploadimg', {// 请求方法method: 'POST',// 提交数据body: data})// 解析返回的json数据const resData = await res.json()// 回显document.querySelector('.icon').src = resData.data.url

fetch提交JSON：

document.querySelector('.btn').addEventListener('click',async function(){// 实例化Headers对象const headers = new Headers()// append 添加keyvalueheaders.append('Content-Type','application/json')const res = await fetch('https://jsonplaceholder.typicode.com/posts',{method: 'POST',headers,// JSON.stringify()将对象转换为json字符串body: JSON.stringify({title: 'foo',body: 'bar',userId: 1})})// res.status 判断状态码const data = await res.json()console.log(data)})