细数promise与async/await的使用及区别说明

//try...catch
const fn = () => {
    return new Promise((resolve, reject) => {
        reject('你错啦~~')
    })
}
const asyncFn = async () => {
    try {
        let result1 = await fn()
    } catch (error) {
        console.log('try...catch:' + error)
    }
}
asyncFn()   //try...catch:你错啦~~
//catch
const asyncFn1 = async () => {
    const res = await fn().catch(err => console.log('catch:' + err))
}
asyncFn1()   //catch:你错啦~~

let p1 = new Promise((resolve, reject) => {
    setTimeout(resolve, 400, 'one');
});
let p2 = Promise.reject("two");
let p3 = new Promise((resolve, reject) => {
    setTimeout(resolve, 1000, 'three');
});
let p4 = Promise.resolve("four");
let p5 = new Promise((resolve, reject) => {
    // reject('reject');
    setTimeout(resolve, 500, 'five');
})
Promise.all([p1,p2,p3,p4,p5]).then(values => {
    console.log(values,"all"); 
}).catch((err) => {
    console.log(err,"allBad"); 
})

Promise.allSettled([p1,p2,p3,p4,p5]).then(values => {
    console.log(values,"allSettled"); 
}).catch((err) => {
    console.log(err,"allSettledBad"); 
})

Promise.any([p1,p2,p3,p4,p5]).then(values => {
    console.log(values,"any"); 
}).catch((err) => {
    console.log(err,"anyBad"); 
})

Promise.race([p1,p2,p3,p4,p5]).then(values => {
    console.log(values,"race"); 
}).catch((err) => {
    console.log(err,"raceBad"); 
})

function mylight(value,time){
    return new Promise((resolve,reject) => {
        setTimeout((params) => {
            console.log(value);
            resolve()
        },time)
    })
}

let step =()=>{
    Promise.resolve()
    .then(() => {
    //此处的return是为了执行后面的.then
        return mylight('red',3000)
    })
    .then((res) => {
        return mylight('green',1000)
    })
    .then((res) => {
        return mylight('yellow',2000)
    })
    .then(res=>{
      // 递归执行
       step()
    })
}
step()

// 用reduce相当于往后面叠加.then,跟上面的重复亮灯代码一样
const arr = [
    {
        color:"red",
        time:3000,
    },
    {
        color:'green',
        time:1000,
    },
    {
        color:'yellow',
        time:2000
    }
]
function fn(arr) {
    arr.reduce((pre, cur,index) => {
        return pre.then(() => {
            return new Promise(resolve => {
                setTimeout(() => {
                    resolve(console.log(cur.color))
                }, cur.time)
            })
        })
    }, Promise.resolve()).then((params) => {
       fn(arr)
    })
    // 以上代码简写为:
    // arr.reduce((pre, cur) => pre.then(() => new Promise(r => setTimeout(() => r(console.log(cur.color)), cur.time))), Promise.resolve()).then((params) => fn(arr))
}
fn(arr)

changeCount = (state)=>{
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
          this.setState(state)
        //resolve包裹成功时的结果
          resolve(this.state.count)
     },100)
   })
 },
pushRouter = async() => {
  //  await this.setState({
  //     count:this.state.count+1
  //   })
   const result = await this.changeCount({
   		count:this.state.count + 1
   })
}

async componentDidMount() {
   const { dispatch } = this.props
   try {
         const response = await dispatch({
              type: "netValueQuery/queryListData",
              payload: {}
         })
         if (response.httpStatus !== 200) {
             throw new Error(response.msg);
         }
         const json = await response.json();
         this.setState({ data: json });
       } catch (error) {
         console.log(error);
   }
}

getSign(result){
    return this.$post(`/share/saveRecord`)
},
getTask() {
    const actid = this.$route.query.id;
    return this.$get(`/lottery/powerTask/${actid}`);
},
async getReady(){
    const task = await this.getTask()
    this.result = task.data.find(item => item.name.includes("分享"))
    const str = await this.getSign(this.result)
},