首页 > 编程语言> 文章详细

JavaScript-Promise介绍-三种状态

2021-04-25 18:32:40 阅读：221 来源： 互联网

标签：resolve console 请求 JavaScript 三种 reject Promise setTimeout

Promise介绍

Promise是ES6引入的一个语法
Promise是异步编程的一种解决方案

什么时候处理异步事件？

网络请求
我们封装一个网络请求的函数，因为不能立刻拿到结果
所以我们会传入另外一个函数，在数据请求成功时，将数据通过传入的而函数回调出去
如果只是一个简单地网络请求，那么这种方案不会给我们带来很大的麻烦
但是当网络请求太复杂时，就会出现回调地狱

回调地狱

我们通过一个url1从服务器加载一个数据data1，data1中包含了下一个请求url2
我们需要通过data1取出url2，从服务器加载数据data2，data2中包含了下一个请求url3
我们需要通过data2取出url3，从服务器加载数据data3，data3中包含了下一个请求url4
发送网络请求url4，获取最终的数据data4

上面代码有什么问题吗?

正常情况下没啥问题，正常运行
但是不容易维护
我们期望一种更加优雅的方式来进行这种异步操作

如何做呢？

Promise可以以一种非常优雅的方式来解决这个问题

Promise基本使用

回调地狱 - - ！

  //Promise参数是一个函数
  //resolve,reject本身又是函数
  new Promise((resolve,reject)=>{
    //异步操作
    setTimeout(()=>{
      console.log('hello world');
      setTimeout(()=>{
        console.log('hello promise');
        setTimeout(()=>{
          console.log('hello vue');
        },1000)
      },1000)
    },1000)
  })

解决方法：链式编程

  //Promise参数是一个函数
  //resolve,reject本身又是函数
  new Promise((resolve,reject)=>{
    //异步操作,第一次网络请求
    setTimeout(()=>{
      //第一次请求结果
      console.log('hello world');
      //再次请求
      resolve()
    },1000)
  }).then(()=>{
    //第二次网络请求
    setTimeout(()=>{
      //第二次请求结果
      console.log('hello vue');
      return new Promise((resolve,reject)=>{
        //返回后再次请求
        resolve()
      })
    },1000)
  }).then(()=>{
    //第三次网络请求
    setTimeout(()=>{
      //第三次请求结果
      console.log('hello java');
    },1000)
  })

当执行new Promise() 是，会执行构造函数，保存一些状态信息，执行传入的函数
在执行传入的回调函数是，会传入两个参数，resolve，reject，本身又是函数

  new Promise((resolve,reject)=>{
    setTimeout(()=>{
      //get data
      resolve(data)
      //失败的时候调用reject
      reject('error message')
    },1000)
  }).then((data)=>{
    //data处理代码
  }).catch((err)=>{
    //error处理代码
  })

Promise三种状态

synchronization: 同步
asynchronization: 异步

padding: 等待状态，比如正在网络请求，定时事件未到
fulfill: 满足状态，请求到了，当我们主动回调了resolve时，就处于该状态，并且会回调then()
reject: 拒绝状态，当我们主动回调reject时，就出于该状态，并且会回调cath()

  new Promise((resolve,reject)=>{
    setTimeout(()=>{
      //resolve('hello,vuejs')
      reject('err message')
    },1000)
  }).then(
    (data) =>{
      console.log(data);
    },
    (err) => {
      console.log(err);
    }
  )

标签：resolve,console,请求,JavaScript,三种,reject,Promise,setTimeout
来源： https://blog.csdn.net/m0_37642480/article/details/116134042

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaScript-Promise介绍-三种状态

Promise介绍

回调地狱

Promise基本使用

Promise三种状态