ES6的Fetch异步请求的实现方法

朴灿烈づ我的快乐病毒、 2022-12-24 04:52 159阅读 0赞

第一步：用IDEA建一个WEB SERVLET工程

第二步：写idex.jsp代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
      <head>
        <title>$Title$</title>
        <script type="text/javascript">
          var url = "fetch";
          fetch(url,{
            method:"post",
            headers:{
              "Content-type":"application/x-www-form-urlencoded"
            },
            body:"name=luwenjing&age=22"
          })
          .then(function (response){
            if (response.status == 200){
              return response;
            }
          })
          .then(function (data) {
            return data.text();
          })
          .then(function(text){
            console.log("请求成功，响应数据为:",text);
          })
          .catch(function(err){
            console.log("Fetch错误:"+err);
          });
        </script>
      </head>
      <body>
        <h1>中华人民共和国</h1>
    
      </body>
    </html>

第三步：写servlet代码：

package controller;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    
    @WebServlet(name = "AServlet",urlPatterns = "/fetch")
    public class AServlet extends HttpServlet {
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            request.setCharacterEncoding("utf-8");
            String name=request.getParameter("name");
            String age=request.getParameter("age");
            System.out.println(name);
            System.out.println(age);
        }
    
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
        }
    }

第四步：执行结果？

jintingbo  
22

第五步：理论分析

fetch的参数有两个，第一个是url即请求的处理路径；

第二个是初始化信息，包括以下几种：

*  method：请求方法，常用的有get和post；
 *  headers：请求头信息，最常用的就是表单格式的数据：”Content-type”:”application/x-www-form-urlencoded”；
 *  mode：控制是否允许跨域。same-origin（同源请求）、no-cors（默认）和cros（允许跨域请求）；
 *  cache：关于缓存的一些设置；
 *  body：要发送到后台的参数，可以为ArrayBuffer，String，FormData等类型；

（2）从上面的代码我们可以知道fetch()方法返回的是一个promise对象；

（3）响应信息为传入then方法成功时的参数，相应包含很多http的响应信息，如下：

![61675f196e56e0e8682d4da7a2c2a760.png][]

（4）可以判断响应的状态吗，返回请求成功的对应信息；

（5）通过状态转换，转换为指定的格式，如果是文本信息，直接text()方法就可以；若为json格式，则json()就可以转换为json格式信息，其实也就是自己请求数据格式时所设置的格式；

**和ajax 的对比**

（1）上面的Fetch代码很像jQuery中的ajax，但是两者是不同的，fetch是原生的js，而jQuery中的ajax是库封装的；

（2）ajax只能实现同源请求，fetch可实现跨域请求；

（3）ajax几乎所有的主流浏览器都支持，但fetch由于目前并没有被列入标准，只有像firefox最新版，chrome最新版，以及IE10+等以上才支持，如下图片所示；

![15ff47b80dcad9f6f0ea4e48bd8df793.png][]

注意：在body中向后台传递参数时，只有写成“key=value&key=value”的形式才会成功，其它方法后台接收到均为null，封装为FormData格式也不成功。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

[61675f196e56e0e8682d4da7a2c2a760.png]: /images/20221120/d2d663f7f9af4c75847f6f6098705507.png
[15ff47b80dcad9f6f0ea4e48bd8df793.png]: /images/20221120/d7dbb6e844274f47ab78473399977efb.png