H5ke9 异步处理

news2024/12/27 21:27:53

.then()的使用详解

案例一:触小图标变大,移走变回

案例三:页面提交文件,我服务器端接收

上次fetvh就一个参数url,,就是get请求

fetch还可以第二个参数对象,可以指定method:改为POST

请求头header

:发送txt,servlet,json给客户端,,异步请求图片

1都是客户端传到服务器端

2异步文件上传,两三行代码把文件传输

.then()的使用详解

是Promise对象的一个方法，用于安排在Promise完成（或解析）后要执行的回调函数。它接受一个或两个参数：第一个参数是Promise成功解析时要调用的函数，第二个可选参数是Promise被拒绝时要调用的函数。
myPromise.then(successFunction, failureFunction);
到达客户端调用第一个回调函数,有状态码,和头,写的是lamdar表达式----只有一条语句就作为lamda返回值.的又是promise

如果第一个有return,那么下一个then形参就是上一个返回值
随即promise状态改为filled调用正确第一个方法.如果第一个出错下一个状态改为reject,调用错误(例如使用未命名的参数)第二个方法
function async_request()
        {
            fetch("../ke8/textfile")//2函数向文件发送请求
            .then(response=>{
                return response.text();
            })
        .then(data=>document.querySelector("#out").innerHTML=data);//写在data里面
        // .catch//如果有错误
        }
你看我们的data就是上一个返回值response.text()----response代表路径

fetch方法在需要发起网络请求时被调用。

3.别人(03-Promise对象的then方法_哔哩哔哩_bilibili)是先声明两个函数,再使用..我们是直接使用

失败

只有一条语句就作为lamda返回值

2请求正文到达客户端调用第二个,图片写到此类型blob,blob是一个二进制数据..URL.createObjject(blob)这方法把内存里的数据给搞出来

思想一:

选乒乓球的给servlet1

羽毛球的给servlet2

这样不会卡,总的servlet负责

笔记:

JAVA字符BUffer

String字节读取

then(response=>{----response对象包含以下可能有用的属性和方法：
        headers: 响应的头信息，以键值对的形式存储。
        text(): 返回响应的文本内容。
        json(): 返回响应的JSON内容。
        blob(): 返回响应的Blob内容。
  formData(): 返回响应的FormData内容。
        url: 响应的URL地址。

我的错误一

从注意这js的

要与servlet 的value这个一样

案例一:触小图标变大,移走变回

requeset-image.html

mouseover事件

ProcessJson

大小图片转换

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>请求图像</title>
    </head>
    <body><img src="img/th.png" id="img">
<script type="text/javascript">
    let img =document.querySelector("#img");
    let  src=img.src;
    img.addEventListener("mouseover",(event=>{
        fetch("img/th_big.png")
        .then(reponse=>reponse.blob())
        .then(blob=>img.src=URL.createObjectURL(blob));
    }));

    img.addEventListener("mouseout",(event)=>{//回来
        img.src=src;
    })

</script>
    </body>
</html>

求解答:
img.addEventListener("mouseover",(event=>{
    fetch("img/th_big.png")拿图片
    .then(reponse=>reponse.blob())传进来?
    .then(blob=>img.src=URL.createObjectURL(blob));给URl?
}));