异步编程

最新推荐文章于 2024-01-05 07:30:00 发布
最新推荐文章于 2024-01-05 07:30:00 发布
阅读量140 收藏
点赞数
分类专栏： js 文章标签： ajax javascript node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WJLSH123/article/details/120296372
版权

同步与异步

同步：阻塞式，一定要等上一段代码出来之后，才能继续执行

异步：非阻塞式，什么时候执行完了，会通过事件触发来告诉我们（事件是其中一种方式）

FileReader（文件读取器）、setTimeout、setInterval

ajax

(异步JavaScript 和 XML【可扩展标记语言】)

  • url：访问的地址
  • method：请求方式 如：GET、POST
  • data：传递给后端的数据（POST才用）
  • callback:回调函数 （）

function ajax(url,method,data,callback){

​ // 创建XMLHttpRequest对象：xml

​ let xhr = new XMLHttpRequest()

​ // 打开通道

​ xhr.open(method,url)

​ // 发送请求

​ xhr.send(data)

​ // 通过事件来获取响应结果

​ xhr.onreadystatechange=function(){

​ // readstate=4说明请求已经完成

​ if(this.readstate == 4){

​ if(status == 200){

​ callback(JSON.parse(this.responseText))

​ }else{

​ console.log(this.statusText)

​ }

​ }

​ }

}

ajax(url.‘GET’,null,function(result){

​ resout.forEach(item => {

​ let

​ })

})

    /**
     * url 访问地址
     * method 请求方式：GET、POST
     * data 传递给后端的数据(POST才用)
     * callback 回调函数(将异步的结果放进去)
     */
    function ajax(url,method,data,callback){
        //1.创建XMLHttpRequest对象:xhr
        let xhr = new XMLHttpRequest();
        //2.打开通道
        xhr.open(method,url);
        if(method.toUpperCase()=='POST'){
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        }
        //3.发送请求
        xhr.send(data);
        //4.通过事件来获取响应结果
        xhr.onreadystatechange=function(){
            //5.readyState=4说明整个请求已经完成了
            if(this.readyState==4){
                //6.获取HTTP状态码，如果是200则成功
                if(this.status==200){
                    let res = JSON.parse(this.response)
                    if(res.errcode){
                        alert(res.errmsg)
                        return;
                    }
                    //将结果传给回调函数
                    callback(res);
                }else{
                    //7.如果状态码不是200，我们就打印状态文本，例如：404 文本就是 Not Found
                    console.log(this.statusText)
                }
            }
        }
    }

在onreadystatechange事件中，通过ajax的readyState 监听服务器的处理进度：
0：初始化，XMLHttpRequest对象还没有完成初始化
1：载入， XMLHttpRequest对象开始发送请求 —open
2：载入完成，XMLHttpRequest对象的请求发送完成—send
3：解析，XMLHttpRequest对象开始读取服务器的响应
4：完成，XMLHttpRequest对象读取服务器响应结束

Content-Type：

  1. 纯文本 text/plain
  2. JSON application/json
  3. form表单 application/x-www-form-urlencoded
  4. 文件上传 multiple-form

回调地狱

多层回调函数嵌套，使得程序变得难以维护，可读性差

 setTimeout(function() {
        console.log('Yay!');
        setTimeout(function() {
            console.log('Yahoo!');
                setTimeout(function(){
                //回调地狱
            },1000)
        }, 1000)
    }, 1000);

Promise(承诺)

ES6推出了Promise语法结构来解决回调地狱问题。
这也就表达了将来会执行的操作，代表异步操作。

三种状态：
pending（进行中）、fulfilled（已成功）和rejected（已失败）

状态改变的过程：
pending->fulfilled
pending->rejected
一旦变成了成功或失败状态，状态就不会再变化。

创建Promise实例：

    const promise = new Promise((resolve, reject) => {
        // do something here ...
        if (success) {
            resolve(value); // fulfilled
        } else {
            reject(error); // rejected
        }
    });
    //通过then方法，分别指定resolved状态和rejected状态的回调函数
    promise.then(function(value) {
        // success
    }, function(error) {
        // failure
    });

用Promise改造Ajax：

    /**
     * url 访问地址
     * method 请求方式：GET、POST
     * data 传递给后端的数据(POST才用)
     */
    function ajax(url,method,data){
        return new Promise((resolve,reject)=>{
            //1.创建XMLHttpRequest对象:xhr
            let xhr = new XMLHttpRequest();
            //2.打开通道
            xhr.open(method,url);
            if(method.toUpperCase()=='POST'){
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            }
            //3.发送请求
            xhr.send(data);
            //4.通过事件来获取响应结果
            xhr.onreadystatechange=function(){
                //5.readyState=4说明整个请求已经完成了
                if(this.readyState==4){
                    //6.获取HTTP状态码，如果是200则成功
                    if(this.status==200){
                        let res = JSON.parse(this.response)
                        if(res.errcode){
                            alert(res.errmsg)
                            return;
                        }
                        //将结果传给回调函数
                        resolve(res);
                    }else{
                        //7.如果状态码不是200，我们就打印状态文本，例如：404 文本就是 Not Found
                        reject(this.statusText)
                    }
                }
            }
        })
    }
    let url = 'http://yapi.smart-xwork.cn/mock/91220/user/list'
    ajax(url,"GET",null).then(result=>{
        if(result instanceof Array){
            //遍历结果
            result.forEach(item=>{
                //创建LI标签
                let li = document.createElement("li");
                li.innerHTML = item.name +"："+ item.sex;
                //将LI追加到UL中
                document.getElementById("parent").appendChild(li);
            })
        }
    },error=>{
        console.log("失败：" +error);
    })

Promise中的异常捕获：

方式一：
ajax(‘GET’,’api/seller.do’,’username=jackie’).then((data)=>{
console.log(data);//成功获得结果
},(err)=>{
console.log(err);//获取错误信息
}

方式二：
ajax(‘GET’,’api/seller.do’,’username=jackie’).then((data)=>{
console.log(data);//成功获得结果
}).catch(err=>{
console.log(err);//获取错误信息
})

Promise.all

    <script>
      function p1() {
        return new Promise((resolve, reject) => {
          resolve("sccess");
        });
      }
      function p2() {
        return new Promise((resolve, reject) => {
          reject("over");
          // resolve("sccess");
        });
      }
      function p3() {
        return new Promise((resolve, reject) => {
          resolve("sccess");
        });
      }

      Promise.all([p1(), p2(), p3()]).then(
        (res) => {
          console.log(res);
        },
        (err) => {
          console.log(err);
        }
      );

      Promise.all([p1(), p2(), p3()])
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    </script>

Promise.allSettled

同时启动多个，不论成功还是失败都会返回全部的结果。

  • Promise.allSettled([p1(),p2(),p3()])
    <script>
      function p1() {
        return new Promise((resolve, reject) => {
          resolve("sccess");
        });
      }
      function p2() {
        return new Promise((resolve, reject) => {
          reject("over");
          // resolve("sccess");
        });
      }
      function p3() {
        return new Promise((resolve, reject) => {
          resolve("sccess");
        });
      }
      Promise.allSettled([p1(), p2(), p3()]).then((arr) => {
        console.log(arr);
      });
    </script>

(3) [{…}, {…}, {…}]
    0: {status: 'fulfilled', value: 'sccess'}
    1: {status: 'rejected', reason: 'over'}
    2: {status: 'fulfilled', value: 'sccess'}
    length: 3
        [[Prototype]]: Array(0)

Promise.race()

race：比赛

多个promise比赛，看谁先执行到最终状态。率先改变

  • promise.race[p1,p2,p3].then(res=>{console.log(res)})
<script>    
     Promise.race([p1(), p2(), p3()])
        .then((arr) => {
          console.log(arr);
        })
        .catch((arr) => {
          console.log(arr);
        });
    </script>

async

  • 给函数前加async关键字，函数的返回值就会变成一个Promise对象
  • 如果我们手动在函数里面return了一个值，则这个值就是Promise对象里面的value，通过then可以取出
    <script>
      async function play() {
        return 123;
      }
      console.log(play()); // promise
      play().then((arr) => console.log(arr));
    </script>

async - await

  • async_await:能让异步代码看起来像是同步代码
  <script>
    async function show(){
      return 123;
    }
    async function play(){
      var res = await show()
      console.log(res);
    }
    play()
  </script>

  <body>
    <script>
      function ajax(url, method, data) {
        return new Promise((resolve, reject) => {
          let xhr = new XMLHttpRequest();
          xhr.open(method,url);
          xhr.send(data);
          xhr.onreadystatechange = function () {
            if (this.readyState == 4) {
              if (this.status == 200) {
                let res = JSON.parse(this.response);
                resolve(res);
              } else {
                reject(this.statusText);
              }
            }
          };
        });
      }

      async function play() {
        try {
          let url =
            "http://yapi.smart-xwork.cn/mock/94700/user/information/user/get";
          let res = await ajax(url, "GET", null);
          console.log(res);
        } catch (error) {
          console.log(error);
        }
      }
      play();
    </script>
WJLSH123
关注
专栏目录
java异步编程详解
08-26
java异步编程详解 Java异步编程是Java编程语言中的一种编程模型，它允许程序异步地执行任务，以提高程序的性能和响应速度。在Java中，异步编程可以通过多种方式实现，包括使用Future、Callable、Runnable、Thread、...
[JavaScript][AJAX]onreadystatechange事件；AJAX含义及组成部分；AJAX工作原理/HTTP工作原理；一个页面从输入url到呈现网页过程；FormData对象；防抖
wusandaofwy的博客
08-28 1527
onreadystatechange事件 AJAX含义及组成部分 AJAX工作原理/HTTP工作原理 一个页面从输入url到呈现网页过程 TCP三次握手图示 渲染引擎渲染网页流程图​编辑 FormData对象 防抖与节流 防抖 节流 防抖和节流的异同点...
onreadystatechange事件详解
最新发布
聚娃科技开发者博客
01-05 1468
事件是在 XMLHttpRequest 对象状态发生变化时触发的事件。XMLHttpRequest 对象用于在后台与服务器交换数据，而则是用来监听这个对象状态变化的事件。通过本文对事件的详细解析，我们深入了解了这一在前端开发中重要的事件。事件在处理异步请求、实现动态页面更新等方面发挥了关键作用，提升了用户体验。在实际应用中，巧妙地运用这一事件可以使前端开发更加灵活高效。希望这篇文章对大家更好地理解和应用事件有所帮助。
onreadystatechange 事件
sereasuesue的博客
09-09 1万+
onreadystatechange 事件 当请求被发送到服务器时，我们需要执行一些基于响应的任务。 每当 readyState 改变时，就会触发 onreadystatechange 事件。 readyState 属性存有 XMLHttpRequest 的状态信息。 下面是 XMLHttpRequest 对象的三个重要的属性： 属性 描述 onreadystatechange...
【面试】onreadystatechange事件
qq_46580087的博客
03-17 3690
在困难面前，回避的时间越长，付出的代价就越大。
Ajax工作原理以及同步与异步的区别
supertor的博客
07-20 2278
其实ajax可以笼统的分为三步 创建 XMLHttpRequest 对象 在onreadystatechange 事件中，获取异步调用返回的数据，使用JavaScript和DOM实现局部刷新 调用对象的方法规定请求的类型、URL 以及是否异步处理请求，并向服务器发送请求 XMLHttpRequest 是 AJAX 的基础。所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6
C#异步编程详解
08-31
在C#编程中，异步编程是一个至关重要的概念，它能显著提高应用程序的性能和响应性，尤其是在处理I/O密集型任务时。本文主要聚焦于Task、Async和Await这三个核心概念，它们是C# 5.0及更高版本中异步编程的核心工具。 ...
关于Promise 异步编程的实例讲解
08-29
关于Promise异步编程的实例讲解 Promise异步编程是JavaScript中的一种常见的编程方式，用于处理异步操作。异步操作是指那些可能需要一段时间才能完成的操作，例如网络请求、读取本地文件等。在异步操作中，使用回调...
javascript异步编程
10-29
JavaScript中的异步编程是编程领域中的一个重要概念，它使得开发者能够编写非阻塞式的代码，提高了应用程序的响应性和效率。在同步编程模式中，代码按照顺序执行，每一行代码必须等待其前一行代码完成才能继续，这就...
JavaScript异步编程g.pdf
12-02
JavaScript异步编程是前端开发领域中的一个重要概念，它允许程序在等待长时间操作（如网络请求）时继续执行其他任务，而不是简单地暂停或停止，从而提升用户体验。本书《JavaScript异步编程》作为图灵程序设计丛书的...
解决问题：onreadystatechange只触发一次
乐在其中
10-29 4972
在研究最基本的AJAX - onreadystatechange 事件时， 通过 XMLHttpReq.onreadystatechange=processResponse(); 绑定了处理 函数，但是仅仅在XMLHttpReq.readyState==1的时候触发了一次该函数？ 先看下认识下onreadystatechange onreadystatechange 事件 当请
与服务器进行数据交互的方法——ajax，axios,fetch
热门推荐
weixin_52703987的博客
03-08 2万+
与服务器进行数据交互的方法——ajax，axios,fetch 一，与服务器交互的类型 同步交互： 理解1：同步是阻塞模式，同步交互时，两个线程的运行是相关的，a线程在运行时，b线程要阻塞等待，直到a线程运行完毕 理解2：同步交互时，客户端发出请求后，需要等待服务器相应结束以后，才能发出第二个请求。 例：再做用户登录功能时，必须检测用户名密码都正确以后才能进入系统。 异步交互： 理解1：异步是非阻塞模式，异步交互时，两个线程的运行不相关，a线程运行时，b线程也正常运行。 理解2：异步交互时，客户端发出请求后
AJax 学习笔记二(onreadystatechange的作用)
weixin_30511039的博客
01-27 69
当发送一个请求后，客户端无法确定什么时候会完成这个请求，所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了onreadyStateChange事件实现这一功能。这类似于回调函数的做法。onreadyStateChange事件可指定一个事件处理函数来处理XMLHttpRequest对象的执行结果，如： 复制代码代码如下: ajaxObj=createAjaxObje...
Ajax-onreadystatechange事件
weixin_30828379的博客
01-24 88
onreadychange事件 readystatus存有XMLHttpRequest的状态信息。 以下为XMLHttpRequest对象的三个重要属性： onreadystatechange: 存储函数（或函数名），每当reatState属性改变时，就会调用该函数。 readyState:存有XMLHttpRequest的状态。从0到4发生变化　　　　 0 :请求未初始化； 1：...
ajax原理及常见应用
z不宅
01-06 1088
原理： Ajax是一种无需重新加载整个网页的情况下，能够部分更新网页的技术。 XMLHttpRequest是Ajax的基础，所有现代浏览器均支持XMLHttpRequest对象（IE5和IE6使用ActiveXObject）； XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 1、为了应对所有现代浏览器，包括IE5、...
XMLHttpRequest 对象
dark_cy的博客
05-11 1556
　　XMLHttpRequest（XHR）对象用于与服务器交互。XMLHttpRequest 是 Ajax 技术的核心，通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。本文主要介绍 XMLHttpRequest 对象的各种属性、方法及事件 XMLHttpRequest 可以用于获取任何类型的数据，而不仅仅是 XML。它甚至支持 HTTP 以外的协议（包括 file:// 和 FTP），尽管可能受到更多出于安全等原因的限制。
界面加载问题的处理-onreadystatechange事件
My_Serendipity的博客
11-14 550
界面加载问题 今天制作了一个网页，因为背景图片比较大，加载较为缓慢（大约需要0.7-0.8s左右，而且是三分之一地加载，卡顿肉眼可见）；而且网页中有延时动画，加载卡顿也让界面体验不好。因此通过查找资料，初步找到了解决办法（可能不是最好的，该方法在某些情况下可能不适用）。 通过AJAX-onreadystatechange事件，可以让界面在所有组件加载完后再显示，这样就可以做到背景图片显示的时候已经是加载好的了。具体代码如下： //界面全部加载完在显示 document.onreadystatechange
关于frame/iframe的onreadystatechange事件
o.
12-18 5122
首先：  iframe   onreadystatechange的事件只用于ie5.5以上版本    frame不支持onreadystatechange的事件    对于iframe    或者在js里面写：          function   loadFile()    {          document.frames("ifm_Test").locatio
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值