promise

@H_502_5@promise  异步处理
new Promise(箭头函数)
new Promise(()=>{}) 

resolve,reject也是函数

1. 基本使用

@H_502_5@  <script>
  new Promise((resolve,reject) => { 
  setTimeout(()=>{
    //成功
    // resolve('hello')
    //失败
    reject('error')
  },1000)
}).then((data)=>{
    console.log(data);
  }).catch(err=>{
    console.log(err);
  })
  </script>

sync同步
async异步

promise三种状态
padding 等待
fulfill 成功
reject 失败

2. 基本使用2

then(函数1，函数2)

@H_502_5@new Promise((resolve,reject)=>{
  setTimeout(()=>{
    resolve('hello')
    reject('error')
  },1000)
}).then(
data=>{console.log(data);},
err=>{console.log('err');}
)

3. 链式调用

return new Promise((resolve,reject)=>{}

@H_502_5@  new Promise((resolve,reject)=>{
    //第一次网络请求的代码
    setTimeout(()=>{
      resolve()
    },1000)
}).then(()=>{
  //第一次拿到结果的处理代码
  console.log('hello 1');
  return new Promise((resolve,reject)=>{
    //第二次网络请求的代码
    setTimeout(()=>{
      resolve()
    },1000)
  }).then(()=>{
    //第二次拿到结果的处理代码
    console.log('2');
    return new Promise((resolve,reject)=>{
    //第三次网络请求的代码
    setTimeout(()=>{
      resolve()
    },1000)
  }).then(()=>{
    //第三次拿到结果的处理代码
    console.log('3');
  })
  })
})

4. 链式调用简写

new Promise(resolve=>{resolve(res+‘111’)})

@H_502_5@new Promise((resolve,reject)=>{
    setTimeout(()=>{
      resolve('aaa')
    },1000)
  }).then((res)=>{
    console.log(res,'第一层的10行处理代码');
    return new Promise((resolve)=>{
      //对结果进行第一次处理
      resolve(res+'111')
    }).then(res=>{
      console.log(res,'第二层的10行处理代码');
      return new Promise((resolve)=>{
        resolve(res+'222')
      }).then(res=>{
        console.log(res,'第三层的10行处理代码');
        return new Promise((resolve)=>{
        resolve(res+'333')
      })
      })
    })
  })

5. 链式调用简简写

return Promise.resolve(res + “111”);

@H_502_5@ new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve("aaa");
        }, 1000);
      })
        .then((res) => {
          console.log(res, "第一层的10行处理代码");
          return Promise.resolve(res + "111");
        })
        .then((res) => {
          console.log(res, "第二层的10行处理代码");
          return Promise.resolve(res + "222");
        })
        .then((res) => {
          console.log(res, "第三层的10行处理代码");
          return Promise.resolve(res + "333");
        });

6. 链式调用简简简写

省略Promist.resole()

@H_502_5@        new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve("aaa");
        }, 1000);
      })
        .then((res) => {
          console.log(res, "第一层的10行处理代码");
          return res + "111";
        })
        .then((res) => {
          console.log(res, "第二层的10行处理代码");
          return res + "222";
        })
        .then((res) => {
          console.log(res, "第三层的10行处理代码");
        });

7. 假设reject

@H_502_5@        new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve("aaa");
        }, 1000);
      })
        .then((res) => {
          console.log(res, "第一层的10行处理代码");
          return res + "111";
        })
        .then((res) => {
          console.log(res, "第二层的10行处理代码");
          // return res + "222";
          return Promise.reject('error')
        })
        .then((res) => {
          console.log(res, "第三层的10行处理代码");
        }).catch(err=>{
          console.log(err);
        });

8. reject 简写 throw ‘error message’ 抛出异常 （Java？？）

---

9. promise的all方法使用

@H_502[email protected](迭代器)  //数组可遍历

@H_502[email protected]([
          // new Promise((resolve,reject){
          //   $ajax({
          //     url:'url1',
          //     success:function(data){
          //      resolve(data)
          //     }
          //   })
          // }),
          // new Promise((resolve,reject){
          //   $ajax({
          //     url:'url2',
          //     success:function(data){
          //       resolve(data)
          //     }
          //   })
          // })
       new Promise((resolve,reject)=>{
        setTimeout(()=>{
          resolve('result1')
        },2000)
        }),
        new Promise((resolve,reject)=>{
          setTimeout(()=>{
            resolve('result2')

        },1000)
          })
        ]).then(results=>{
         console.log(results);
        })