Promise笔记

1. 什么情况下会使用Promise?

• 有异步操作时

2. 基本使用

• 套路

      new Promise(((resolve, reject) => {
          // ajax网格请求,响应数据data
          // 如果成功, 调用resolve方法
          resolve(data)
          // 如果失败, 调用reject方法
          // reject(err)
      })).then((data)=>{  // data就跑到这里来了
          // 对data进行业务处理.
      }).catch((err)=>{
          // 处理错误信息  
      })
  

• 示例

      new Promise(((resolve, reject) => {
          // 使用setTimeout模拟网络请求,返回一个'hello vue js'
          setTimeout(()=>{
              resolve('hello vue js')
          },1000)
      })).then((data)=>{
          console.log(data);
      })
  

3. 链式调用

• 原始版

   // 第一次网络请求,返回aaa, 拼接111后,交给第二步处理, 第2步拿到结果后拼上222 ,   然后....
      new Promise(((resolve, reject) => {
          setTimeout(() => {
              resolve('aaa');
          }, 1000)
      })).then(data => {
          // 处理10行代码
          console.log('第1步处理的10行代码');
          return new Promise((resolve) => {
              resolve(data + ' 111');
          })
      }).then(data => {
          console.log('第2步处理的10行代码');
          return new Promise((resolve) => {
              resolve(data + ' 222');
          })
      }).then(data => {
          console.log('第3步处理的10行代码');
          console.log(data);
      })
  
  

• 精简版

   new Promise(((resolve, reject) => {
          setTimeout(() => {
              resolve('aaa');
          }, 1000)
      })).then(data => {
          // 处理10行代码
          console.log('第1步处理的10行代码');
          return Promise.resolve(data + ' 111')
          // return Promise.reject(data + ' 111')  // 处理错误
      }).then(data => {
          console.log('第2步处理的10行代码');
          return Promise.resolve(data + ' 222')
      }).then(data => {
          console.log('第3步处理的10行代码');
          console.log(data);
      })
  

• 最简版

      new Promise(((resolve, reject) => {
          setTimeout(() => {
              resolve('aaa');
          }, 1000)
      })).then(data => {
          // 处理10行代码
          console.log('第1步处理的10行代码');
          // return data + ' 111'
          throw 'error message' // 处理异常
      }).then(data => {
          console.log('第2步处理的10行代码');
          return data + ' 222'
      }).then(data => {
          console.log('第3步处理的10行代码');
          console.log(data);
      }).catch(err => {
          console.log(err);
      })
  

4. Promise All方法的使用

  Promise.all([
        new Promise(((resolve, reject1) => {
            setTimeout(() => {   // 网络请求1 
                resolve('aaa')
            }, 1000)
        })),

        new Promise(((resolve, reject1) => {
            setTimeout(() => {   //网络请求2
                resolve('bbb')
            }, 2000)
        }))
    ]).then(results => {
        console.log(results);  // ["aaa", "bbb"]
    });

只有等网络请求1,网络请求2都返回结果之后,then方法才会执行,而且其参数是个数组, 数组中的元素就是两次网络请求的返回值.