fetch网络请求详解

编程入门行业动态更新时间:2024-10-21 23:16:50

fetch网络请求<a href=https://www.elefans.com/category/jswz/34/1770044.html style= 详解"/>

fetch网络请求详解

一：三种常见的网络请求对比：

AJAX：基于XMLHttpRequest收发请求，使用较为繁琐，代码量会比较多
axios：基于promise的请求客户端，在浏览器和node中均可使用，使用便捷，功能强大
fetch：内置api，基于promise，用法和axios类似，功能更为简单，没有axios那么强大

AJAX现在一般为学习过渡使用，日常开发中一般不会使用。做项目的时候一般是使用axios，当项目规模比较小，调用接口次数很少的时候可以使用 fetch 替换 axios ，这样更为便捷迅速。

如果你想了解fetch参数，可以参考文章fetch() - Web API 接口参考 | MDN。本文主要是讲解fetch的使用。

二：fetch详解

全局的fetch()方法用于发起获取资源的请求，它返回一个promise，这个promise会在请求响应后被resolve，并传回request对象。

1、fetch核心语法

下面代码是一个简答的fetch请求，在这些请求中，我们主要分为以下三步：

发送请求
处理响应（JSON）
处理异常

在这里我们要注意，我们的参数是使用的一个 URLSearchParams 对象，在url传参中使用 toString() 方法去完成参数的传递。并且 fetch 的请求方式默认为 get 。并且返回的是一个promise ，所以我们需要使用 await 进行等待。并且处理最终返回的 JSON 对象。

<body><h2>fetch核心语法</h2><button class="btn">测试</button><script>document.querySelector('.btn').addEventListener('click',async () => {// 生成一个params，方便后面转换成字符串const p = new URLSearchParams({pname:'贵州省',cname:'贵阳市'})// 发送请求，默认是get方法const res = await fetch('?' + p.toString())// 获取返回的结果状态码console.log(res.status);// 解析返回的json串if(res.status>=200 && res.status <300){const data = await res.json()console.log(data);}else{// 这里是请求异常的响应console.log('请求异常',res.status);}})</script>
</body>

2、fetch提交FormData

在实际的项目开发中，提交文件一般是FormData格式，因此与JSON格式写法是不一样的，但是其实思路也是可以分为请求方法和提交数据，解析返回值三步。接下来让我们来看一下代码的具体实现。

在下方代码中，HTML中是上传图片和图片的回显，使用 DOM 去绑定事件。获取到选择的图片，然后添加到 FormData 对象中，在上传接口中将 FormData 传递过去。而后去处理返回的结果，拿到返回结果中的 url 地址，再使用 DOM 去回显到我们的 img 标签。

<body><h2>提交FormData</h2><input type="file" class="ipt"><img src="" alt="" class="icon"><script>document.querySelector('.ipt').addEventListener('change',async function() {// 获取选择的图片const img = this.files[0]// 将选择的图片添加到FormData对象中const data = new FormData()data.append('img',img)// 使用fetch上传const res = await fetch('',{method:'post',body:data})// 获取返回的结果状态码console.log(res.status);// 解析返回的json串if(res.status>=200 && res.status <300){const resData = await res.json()console.log(resData);// 回显document.querySelector('.icon').src = resData.data.url}else{// 这里是请求异常的响应console.log('请求异常',res.status);}})</script>
</body>

3、fetch提交JSON

跟服务器正常通信一般是 JSON 对象，这个区别于 FormData 主要是对了请求头设置这一步。下面让我们来看一下具体的实现步骤吧！

<body><h2>fetch提交JSON</h2><button class="btn">提交JSON</button><script>document.querySelector('.btn').addEventListener('click',async () => {// 实例化Headers对象const headers = new Headers()// append 添加 keyvalueheaders.append('content-type','application/json')const res = await fetch('',{method:'post',// 这里因为和上面的headers是同名的，所以直接简写headers,// 因为要传JSON对象，所以需要转一下body:JSON.stringify({username:'baoNvCode',password:'123456'})})// 获取返回的结果状态码console.log(res.status);// 解析返回的json串if(res.status>=200 && res.status <300){const resData = await res.json()console.log(resData);}else{// 这里是请求异常的响应console.log('请求异常',res.status);}})</script>
</body>