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

最新推荐文章于 2024-05-14 00:32:31 发布

庭博

最新推荐文章于 2024-05-14 00:32:31 发布

阅读量572

点赞数

分类专栏： JAVA 湖北荆门金庭波文章标签： java js fetch

本文链接：https://blog.csdn.net/jintingbo/article/details/110201782

版权

金庭波同时被 3 个专栏收录

86 篇文章 1 订阅

订阅专栏

JAVA

85 篇文章 3 订阅

订阅专栏

湖北荆门

19 篇文章 1 订阅

订阅专栏

第一步：用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的响应信息，如下：

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

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

和ajax 的对比

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

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

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

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

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

庭博

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
ES6的Fetch异步请求的实现方法

第一步：用IDEA建一个WEBSERVLET工程第二步：写idex.jsp代码：<%@ page contentType="text/html;charset=UTF-8" language="java" %><html> <head> <title>$Title$</title> <script type="text/javascript"> var url = "fetch"; .
复制链接

扫一扫