码迷,mamicode.com
首页 > 其他好文 > 详细

promise的基本使用和理解

时间:2020-09-17 14:06:25      阅读:74      评论:0      收藏:0      [点我收藏+]

标签:知识   并且   数组   操作   参数   dash   sde   resolve   调用   

Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理且更强大。

特点

1.有三种状态

  (1)   padding:等待(进行中)

(2)Fulfilled:满足(已成功)调用resolve

(3)reject:拒绝(已经失败)会调用reject

我用了setTimeout函数来模拟异步请求

  //使用Promise解决三次网络请求
  //第一次发送请求
  new Promise((resolve, reject) => {
    setTimeout(()=>resolve("jiang"),1000)
  }).then((date)=>{
    console.log(date);
    //第二次发送请求
    return new Promise((resolve, reject) => {
      setTimeout(()=>resolve("shan"),1000)
    })
  })
      .then((date)=>{
    console.log(date);
    //第三次发送请求
    return new Promise((resolve, reject) => {
      setTimeout(()=>resolve("os"),1000)
    })
  })
      .then((date)=>{
    console.log(date)
  })

可以看出在Promise内传入函数后,会自动回调生成两个参数resolve和reject,并且这两个参数又是函数.

在setTimeout里回调了resolve传入data,之后回调了resolve内的then()方法,并完成了请求成功的后续操作。

然后我又重复了这一操作,完成了三次异步操作。优点是解决了回调地狱,以及拥有链式编程的美感。

2.catch

.catch是请求失败时所调用的方法和then类似在书写时可以在.then后写.catch

new Promise((resolve, reject) => {
    //setTimeout(()=>resolve("jiang"),1000)
    setTimeout(()=>reject("err"),1000)
  }).then(date=>{
    console.log(date)});
.catch(date=>{console.(data)})

当然可以不用值么麻烦查看then源码后可以得知then内可以传递两个回调参数then(函数1,函数2)

new Promise((resolve, reject) => {
    //setTimeout(()=>resolve("jiang"),1000)
    setTimeout(()=>reject("err"),1000)
  }).then(date=>{
    console.log(date)},erro=>
{console.(erro)}

);

 然后分析了一些promise的题和后得知了在创建了new Promise((resolve, reject)后后面的可以简写或者不写简写为 new  Promisde.reslve() 

reject也可以用throw来抛出异常

并且学到了一个新知识Promise.all([])在翻源码时看不懂但看得懂[]那就是传数组呗,又查了些资料
Promise.all([])可以用来得到两个或多个异步操作的结果并进行统一操作之前用ajax得再创个函数接收两个的请求结果并且还要做一下判断,
而用
  Promise.all([
    new Promise((resolve) =>
        setTimeout(() => resolve("jiang"), 1000)
    ),
    new Promise((resolve) =>
        setTimeout(() => resolve("shan"), 1000))
    ])
      .then(data => {
    console.log(data)
  })

 

 



promise的基本使用和理解

标签:知识   并且   数组   操作   参数   dash   sde   resolve   调用   

原文地址:https://www.cnblogs.com/jiangxiaoming/p/13617656.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有
迷上了代码!