promise的基本用法和案例

最新推荐文章于 2024-06-27 09:04:49 发布

怎么办！

最新推荐文章于 2024-06-27 09:04:49 发布

阅读量958

点赞数 1

文章标签： javascript 服务器前端

本文链接：https://blog.csdn.net/m0_71753445/article/details/125688894

版权

本文介绍了JavaScript中的异步编程，重点讲解了Promise的概念、原理及应用，包括Promise对象的创建、状态转换、then和catch方法的使用，以及如何用Promise封装ajax请求。此外，还简要提及了async/await的异步处理方式。

摘要由CSDN通过智能技术生成

一、同步和异步

1.1-概念

1.同步代码：代码单线执行，发送服务器请求后，等待返回数据，会出现网页阻塞（阻塞网页）

2.异步代码：代码发送请求后继续执行后续代码，不等待服务器返回数据（网页运行流畅）

同步交互和异步交互
同步交互	客户端向服务器端发送请求，必须等到结果返回，才能进行其他的业务操作
异步交互	客户端向服务器端发送请求，不必等到结果返回，就可以进行其他的业务操作

// 下面代码就是同步的
     console.log(1);
     for(var i = 0;i<=10000000;i++){
   }
     console.log(2);
     console.log(3);
     console.log(4);

// 异步代码：定时器  
    setTimeOut()  
//举个例子
   console.log(1);
      setTimeout(function () {
   
        console.log(2);}, 0)
    console.log(3);
        setTimeout(function () {
   
    console.log(4);}, 0)
    console.log(5);
、//执行结果是-------------1,3,5,2,4

1.2-js中常见的异步执行代码

1.ajax请求：异步 JavaScript 和 XML--------xhr.onreadystate = function(){}

2.定时器，间隔一定的时间才执行------------setTimeout setInterval

3.时间处理函数：满足事件触发条件才会执行

4.es6的promise

1.3-异步底层执行原理

js代码是单线执行，代码从上往下依次执行，当遇到【异步任务】时，将其储存到一个【执行队列】中，当主线的代码执行结束后，在根据服务器的处理先后顺序执行剩余的【异步任务】

1.4-获取取异步函数返回值

解决方案：回调函数来解决

 function getNum(callback){
   
      setTimeout(function(){
   
          callback(1);
      },500)
  }

getNum(function(data){
   
    console.log(data);
})

1.5-多个异步任务,顺序执行

  setTimeout(function () {
   
        console.log(1);
        setTimeout(function () {
   
            console.log(2);
            setTimeout(function () {
   
                console.log(3);
                setTimeout(function () {
   
                    console.log(4);
                }, 2000)
            }, 3000)
        }, 5000)
    }, 1000)

问题：
1. 代码丑,冗杂,难维护
2. 执行效率低

二、Promise完美解决回调地狱

3.1 Promise对象

Promise（承诺），在程序中的意思就是承诺我过一段时间（通常是一个异步操作）后会给你一个结果，是异步编程的一种解决方案。

从语法上说，原生Promise 是一个对象，从它可以获取异步操作的消息

Promise 提供统一的 API，各种异步操作都可以用同步的写法进行处理。

3.2 Promise实现原理

Promise 构造函数接受一个函数作为参数，该函数的两个参数分别是 resolve 和 reject。

它们是两个函数，由 JavaScript 引擎提供，不用自己部署。

1.Promise是一个对象，它提供一些api帮助我们实现 解决回调地狱，还能帮助我们取出函数异步代码内的值

2.let p = new Promise(function(resolve,reject){
   })

3. 2个方法
      p.then(data=>console.log(data))