ES8-async函数

async函数(源自ES2018)
  概念： 真正意义上去解决异步回调的问题，同步流程表达异步操作
  本质： Generator的语法糖,不需要像Generator去调用next方法，遇到await等待，
        如果await后面是promise,resolve则会继续往下执行, reject则终止后续代码
语法：
      async function foo(){
        await 异步操作;
        await 异步操作；
      }
特点：
    1.async函数返回的总是Promise对象，可以用then方法进行下一步操作                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
    2.async取代Generator函数的星号*，await取代Generator的yield
    3.语意上更为明确，使用简单
    4.await返回值 : 
      await后面如果是普通函数 就是函数的返回值 , 
      如果是promise对象返回值是undefined或者resolve的值,
      如果是reject,会抛出未捕获promise,需要用try catch 捕获 ,也可以对外部接受async函数返回值的promise对象调用.then去捕获,这样也不会报错

async函数返回值

<script>
  const P = new Promise((resolve,reject)=>{
    // resolve('成功')
    reject('失败')
  })
  async function fn(){
    //1.return 的结果不是 Promise对象,则返回的就是一个成功状态的Promise对象
    return '字符串'          //Promise {<resolved>: '字符串'}
    return ;                 //Promise {<resolved>: undefined}
    //2.抛出一个错误,则返回的是一个 失败的 Promise
    throw new Error('出错了') //Promise {<rejected>: Error: 出错了at fn (file:///D:/Restudy/ES6/7.async.html:7:11) at file:///D:/Restudy/ES6/7.asy…}
    //3.手动返回一个promise对象
    return new Promise((resolve,reject)=>{
      reject('失败啦')
     })
    //4. await , promise状态为resolve则返回 Promise {<resolved>: undefined}
    //           promise状态为rejected则返回 Promise {<rejected>: '失败'}
    await P
    
  }
  let p = fn()
  console.log(p)
  //返回的是promise对象,所以可以使用then 等方法
  p.then(data=>{
    console.log(data)
  },err=>{
    console.log(err)
  })

  
  
</script>

await返回值

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
  const p1 = new Promise((resolve,reject)=>{

      $.ajax({
                method:'get',
                url:'http://localhost:30010/news?id=2',
                success:data=>resolve(data),
                error: error=>reject(false),
      })
  })
  async function fn(){
    try{
      let result = await p1
      console.log(result)
    }catch(e){
      console.log(e)
    }
  }
  let p2 = fn()
  console.log(p2)
  //返回的是promise对象,所以可以使用then 等方法
  // p2.then(data=>{
  //   console.log(data)
  // },err=>{
  //   console.warn(err)
  // })
</script>

案例

function getNews(url){
        return new Promise((resolve,reject)=>{
            $.ajax({
                method:'get',
                url,
                success:data=>resolve(data),
                //这里使用resolve返回失败结果就不需要去捕获了,从逻辑上判断即可
                error: error=>resolve(false),
            })
        })
}
async function sendXml() {
        let result = await getNews('http://localhost:3000/news?id=2');
        if(!result){
            alert('暂时没有新闻');
            return;
        }
        result = await getNews('http://localhost:3000'+result.commentsUrl);
        console.log(result)
}
sendXml();

image.png