vue-Promise的all方法

最新推荐文章于 2023-09-04 18:52:38 发布

两人走

最新推荐文章于 2023-09-04 18:52:38 发布

阅读量7.5k

点赞数

分类专栏： Vue 文章标签： node.js vue.js

本文链接：https://blog.csdn.net/weixin_43862280/article/details/104715433

版权

Vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

vue-Promise

简介

1.promise是异步编程的一种解决方案

2.什么情况下会来处理异步事件?

1>一种很常见的场景就是网络请求

2>我们封装网络请求的函数,因为不能立即拿到结果,所以不能简单的像3+4=7一样直接返回结果

3>所以我们往往传入一个函数,在数据请求成功时,将数据从回调函数中拿出来

4>如果只是简单的网络请求,那么这种方案不会给我们带来很大的麻烦

5>但是,当网络请求非常复杂时,就会出现回调函数地狱(ajax相互嵌套)

总结:Promise就是解决上面的问题的.而且是优雅的解决

Promise三种状态

开发有异步操作时,就可以给异步操作包装一个Promise,异步操作有三种状态:

1.pending:等待状态,比如正在进行网络请求,或者是定时任务

2.fulfill:满足状态,当我们主动回调resolve时,就处于该状态

3.reject:拒绝状态,当我们主动回调reject时,就处于该种状态,并且会回调.catch().

Promise-Promise链式处理

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

<script>
  new Promise((resolve,reject) => {
    setTimeout(()=>{
      resolve('sss');
    },1000);
  }).then((data) =>{
    console.log(data);
    return new Promise(resolve => {
      resolve(data + "bbb");
    });
  }).then(data =>{
    console.log(data)
  });
</script>
</body>
</html>

Promise的all函数

应用场景当两个异步请求需要同时过来才能完成一个功能,这是使用all函数比较合适,为什么因为底层把结果迭代到一个一个数组中了,所以我们最后调用.then()方法时,判断就非常的方便,而且代码非常简洁,利于维护.下面实示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
<script>
  Promise.all([
    new Promise((resolve,reject) => {
      const result = 1000;
      resolve(result)
    }),
    new Promise((resolve,reject) => {
      const result = 2000;
      resolve(result)
    })
  ]).then(result =>{
    console.log(result[0]);
    console.log(result[1])
  });


</script>
</html>

两人走

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue-Promise的all方法

vue-Promise简介1.promise是异步编程的一种解决方案2.什么情况下会来处理异步事件?1>一种很常见的场景就是网络请求2>我们封装网络请求的函数,因为不能立即拿到结果,所以不能简单的像3+4=7一样直接返回结果3>所以我们往往传入一个函数,在数据请求成功时,将数据从回调函数中拿出来4>如果只是简单的网络请求,那么这种方案不会给我们带来很大的麻烦...
复制链接

扫一扫