ES6 部分知识箭头函数 promise

ES6 部分知识

箭头函数

const ccc = () => {}
const sum = (num1,num2) => {return num1+num2}
const sum = num1 => { return num*num } //一个参数小括号可以省略
const mul = (num1,num2) => num1*num2; //之后一行代码值return可以省略，自动返回

箭头函数的this引用的最近的作用域中的this，向外层的作用域中，一层层查找this，直到有this的定义

Promise

异步编程的解决方案

通过resolve() 调用 .then() 函数，实现嵌套

一般在有异步操作时候使用Promise

链式

new Promise((resolve,reject)=>{
  setTimeout(()=>{

    console.log("hello");
    resolve();
    reject('error message')
  },1000)
}).then(()=>{
  console.log("hello");
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{
      resolve();
    },1000)
  })
}).then(()=>{
  console.log("hello");
}).catch((err) => {
    console.log(err);
})

Promise的三种状态

sync 同步

pending 等待状态

fulfill 满足状态，当主动调用resolve时候，就处于该状态

reject 拒绝状态，当我们主动回调reject 时候，就处于才状态,并且会回调 .catch

另一种使用

new Promise(((resolve, reject) => {
  setTimeout(() => {
    resolve("he");
    reject("vv");
  },1000).then(data => {
    console.log(data)
  }, err => {
    console.log(err);
  })
}))

链式调用

<script>
  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("aaa");
    },1000);
  }).then(res => {
    console.log(res,"第一次处理代码");
    return new Promise(resolve => {
      resolve(res + '111');
    })
  }).then(res => {
    console.log(res , "第二次处理代码");
    return new Promise(resolve => {
      resolve(res + '222');
    })
  }).then(res => {
    console.log(res, "第三次处理代码")
  })

</script>

简写

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

省略到 new promise 直接return

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

Promise all 用法

//模拟
<script>
  Promise.all([
      new Promise(((resolve, reject) => {
        $ajax({
          url: '',
          success: function (data) {
            resolve(data);
          }
        })
      })),
    new Promise(((resolve, reject) => {
      $ajax({
        url: '',
        success: function (data) {
          resolve(data);
        }
      })
    }))
  ]).then(results => {
    console.log(results);
  })
</script>

<script>
  Promise.all([
      new Promise(((resolve, reject) => {

        setTimeout(() => {
          resolve('result')
        },1000);
      })),
    new Promise(((resolve, reject) => {
      setTimeout(() => {
        resolve('result2')
      },1000);
    }))
  ]).then(results => {
    console.log(results);
  })
</script>