vue-Promise的all方法

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

两人走

7612人浏览 · 2020-03-07 15:22:36

两人走 · 2020-03-07 15:22:36 发布

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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^