ES6 promise

最新推荐文章于 2024-10-29 20:22:44 发布

原创最新推荐文章于 2024-10-29 20:22:44 发布 · 248 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css3

ES6 专栏收录该内容

20 篇文章

订阅专栏

介绍

本文是在学习ES6时做的一些学习笔记，所有的笔记请查看：ES6 学习笔记

Promise

我们知道的，在 JavaScript 中，所有代码都是单线程的，也就是同步执行的。而 Promise 就为异步编程提供了一种解决方案。

基本概念

名称：
译为“承诺”，这也就表达了将来会执行的操作，代表异步操作。
状态：
一共有三种状态，分别为pending（进行中）、fulfilled（已成功）和rejected（已失败）。
特点：
(1)只有异步操作可以决定当前处于的状态，并且任何其他操作无法改变这个状态；
(2)一旦状态改变，就不会在变。状态改变的过程只可能是：从pending变为fulfilled和从pending变为rejected。如果状态发生上述变化后，此时状态就不会在改变了，这时就称为resolved（已定型）

const promise = new Promise((resolve, reject) => {
    // do something here ...
    if (success) {
        resolve(value); // fulfilled
    } else {
        reject(error); // rejected
    }
});

由上述代码我们可知：该构造函数接收两个函数作为参数，分别是resolve和reject。
当异步操作执行成功后，会将异步操作结果作为参数传入resolve函数并执行，此时
Promise对象状态从pending变为fulfilled；失败则会将异步操作的错误作为参数传入reject函数并执行，此时
Promise对象状态从pending变为rejected；

接下来，我们通过then方法，分别指定resolved状态和rejected状态的回调函数。

promise.then(function(value) {
      // success
  }, function(error) {
      // failure
  });

then方法可以接收两个回调函数作为参数，第一个回调函数就是fulfilled状态时调用；第二个回调函数就是rejected时调用。这边的第二个参数是可选的，不一定要提供。

then() 方法

Promise.prototype.then()方法

基础用法示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>

<body>
<script>
// Promise可以对做一些处理，当成功后再调用then执行
// 
const p = new Promise((resolve,reject)=>{
    //resolve('Lavarist is awesome!');  // 立即成功
    setTimeout(()=>{
        resolve('Lavarist is awesome!');// 当成功时调用resolve
        reject('Lavarist is awesome!'); // 当失败时调用reject
        
        // 当失败时调用reject,并且使用Error()报错时，错误提示才会
        // 显示在改行
        reject(Error('Lavarist is awesome!'));
         
    },2000);
})
p.then(data=>{ // 成功时调用.then()
    console.log(data);
}).catch(err =>{ // 失败时调用.catch()
    console.log(err);
})

</script>

</body>
</html>

axios示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Spread operator Intro</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
<script>
let username;
const usersPromise=axios.get('https://api.github.com/users');
usersPromise.then(response=>{
    username = response.data[0].login;
    return axios.get(`https://api.github.com/users/${username}/repos`)
    
}).then(response=>{
    console.log(response.data);
}).catch(err=>{
    console.log(err)
})

</script>

</body>
</html>

Promise关联调用示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>

<body>
<script>
const repos = [
    {name: 'grit',owner： 'mojombo',description: 'Grit is no 
    longer maintained',id: 1},
    
     {name: 'jsawesome',owner： 'vanpelt',description: 'Awesome JSON',
     id: 2},
    
     {name: 'merb-core',owner： 'wycats',description: 'Merb Core:All 
     you neeed',id: 3},
]
const owners = [
    {name: 'mojombo',location: 'San Franciso', followers: 123},
    {name: 'vanpelt',location: 'Bay Minette', followers: 1034}.
    {name: 'wycats',location: 'Los Angeles,CA', followers: 388}
]

function getReportById(id){
    return new Promise((reslove,reject) =>{
        const repo = repos.find(repo =>repo.id === id);
        if(repo){
            reslove(repo);
        }else {
            reject(Error('No repo found.'))
        }
    })
}

function comboundOwner(repo){
    return new Promise((reslove,reject) =>{
        const owner = owners.find(owner => ower.name === repo.owner);
        if(owner){
            repo.owner = owner;
            resolve(repo);  
        } else {
            reject(Error('can not found the owner'))
        }
        
    })
}

// 先查询id==1的repos,然后根据查询出的结果查询owners
getRepoById(1).then(repo => {
    return comboundDwner(repo);
}).then(repo =>{
    console.log(repo);
}).catch(err =>{
    console.log(err);
})

</script>

</body>
</html>

Promise 常用方法

Promise all()

Promise.all(iterable)方法返回一个Promise实例。这个实例在iterable参数内的所有Promise对象都resolved或者参数不包含Promise时回调完成。如果参数中有一个rejected，则此实例回调失败，失败原因是第一个rejected的promise结果。

Promise.race()

Promise.race(iterable) 。这个实例在iterable参数内的只要有一个Promise对象状态变为解决或拒绝，返回的
promise就会解决或拒绝。第一个promise返回的为reslove，则为reslove；第一个返回reject,则为 reject

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>

<body>
<script>
   const userPromise =new Promise((reslove,reject)=>{
       setTimeout(()=>{
           reslove(['mojombo','vanpelt','wycats']);
       },2000);
   });
   const moviePromise= new Promise((reslove,reject)=>{
       setTimeout((0)=>{
           reslove({name :'shua',rating: 9.2,year: 2016})
       })
   })
// all方法，当所有promise的结果都是reslove时，才会执行then.
// 如果其中有一个失败，则会执行catch()
Promise..all([userPromise,moviePromise]).then(response=>{
    const [user,movie] = response;
    console.log(user);
    console.log(movie);
}).catch(err=>{
    console.log(err);
})

// race()方法，如下所示当将moviePromise的时间改为500时，则moviePromise
// 先返回，则race()结果为moviePromise的结果
   const userPromise =new Promise((reslove,reject)=>{
       setTimeout(()=>{
           reslove(['mojombo','vanpelt','wycats']);
       },2000);
   });
   const moviePromise= new Promise((reslove,reject)=>{
       setTimeout((0)=>{
           //reslove({name :'shua',rating: 9.2,year: 2016})
           reject(Error('No movie'))
       },500)
   })；
   
   // 如下回返回No movie的reject结果
  Promise.race([userPromise,moviePromise]).then(response=>{
       const [user,movie] = response;
       console.log(user);
       console.log(movie);
  }).catch(err=>{
      
  })

</script>

</body>
</html>