• fetch网络请求详解

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

    1. AJAX：基于XMLHttpRequest收发请求，使用较为繁琐，代码量会比较多
    2. axios：基于promise的请求客户端，在浏览器和node中均可使用，使用便捷，功能强大
    3. 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 对象。

    2.     <h2>fetch核心语法h2>
    3.     <button class="btn">测试button>
    4.     <script>
    5.         document.querySelector('.btn').addEventListener('click',async () => {
    6.             // 生成一个params，方便后面转换成字符串
    7.             const p = new URLSearchParams({pname:'贵州省',cname:'贵阳市'})
    8.             // 发送请求，默认是get方法
    9.             const res = await fetch('http://hmajax.itheima.net/api/area?' + p.toString())
    10.             
    11.             // 获取返回的结果状态码
    12.             console.log(res.status);
    13.  
    14.             // 解析返回的json串
    15.             if(res.status>=200 && res.status <300){
    16.                const data = await res.json()
    17.                console.log(data);
    18.             }else{
    19.                 // 这里是请求异常的响应
    20.                 console.log('请求异常',res.status);
    21.             }
    22.         })
    23.     script>
    24. body>

    2、fetch提交FormData

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

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

    1. <body>
    2.     <h2>提交FormDatah2>
    3.     <input type="file" class="ipt">
    4.     <img src="" alt="" class="icon">
    5.     <script>
    6.         document.querySelector('.ipt').addEventListener('change',async function() {
    7.             // 获取选择的图片
    8.             const img = this.files[0]
    9.             // 将选择的图片添加到FormData对象中
    10.             const data = new FormData()
    11.             data.append('img',img)
    12.             // 使用fetch上传
    13.             const res = await fetch('http://hmajax.itheima.net/api/uploadimg',{
    14.                 method:'post',
    15.                 body:data
    16.             })
    17.             
    18.             // 获取返回的结果状态码
    19.             console.log(res.status);
    20.  
    21.             // 解析返回的json串
    22.             if(res.status>=200 && res.status <300){
    23.                const resData = await res.json()
    24.                console.log(resData);
    25.                // 回显
    26.                document.querySelector('.icon').src = resData.data.url
    27.             }else{
    28.                 // 这里是请求异常的响应
    29.                 console.log('请求异常',res.status);
    30.             }
    31.         })
    32.     script>
    33. body>

    3、fetch提交JSON

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

    1. <body>
    2.     <h2>fetch提交JSONh2>
    3.     <button class="btn">提交JSONbutton>
    4.     <script>
    5.         document.querySelector('.btn').addEventListener('click',async () => {
    6.             // 实例化Headers对象
    7.             const headers = new Headers()
    8.             // append 添加 keyvalue
    9.             headers.append('content-type','application/json')
    10.  
    11.  
    12.             const res = await fetch('http://hmajax.itheima.net/api/register',{
    13.                 method:'post',
    14.                 // 这里因为和上面的headers是同名的，所以直接简写
    15.                 headers,
    16.                 // 因为要传JSON对象，所以需要转一下
    17.                 body:JSON.stringify({
    18.                     username:'baoNvCode',
    19.                     password:'123456'
    20.                 })
    21.             })
    22.             
    23.             // 获取返回的结果状态码
    24.             console.log(res.status);
    25.  
    26.             // 解析返回的json串
    27.             if(res.status>=200 && res.status <300){
    28.                const resData = await res.json()
    29.                console.log(resData);
    30.             }else{
    31.                 // 这里是请求异常的响应
    32.                 console.log('请求异常',res.status);
    33.             }
    34.         })
    35.     script>
    36. body>

    三：总结

             fetch 适用于开发请求接口次数少的项目，这种情况下相较于axios能够更加的节省资源，以及提高代码的简洁性，降低后期维护需要的成本。掌握 fetch 是不难的，主要是要学会各种情况下的不同使用，以及不同参数的书写逻辑。好啦本文就到此位置了，希望能够对你有所帮助哦。

  • 相关阅读:
    react中useState的值没有改变，而是旧的数值
    mysql牛客网大厂面试刷题深度解析篇，每日一更（持续更新）
    Qos（Quality of Service）
    领英辅助工具领英精灵分组功能解析
    Golang每日一练(leetDay0075) 打家劫舍II、最短回文串
    leetcode周赛第二题6230. 长度为 K 子数组中的最大和
    idea中使用Maven出现https://repo.maven.apache.org/maven2问题
    编程题01——十进制转二进制
    【Vue】生命周期一文详解
    极客时间Kafka - 02 为什么要分区|生产者的分区策略|轮询策略|随机策略|消息键保序策略
  • 原文地址：https://blog.csdn.net/c18559787293/article/details/133959625