美文网首页
es6-async的用法

es6-async的用法

作者: lvyweb | 来源:发表于2021-06-16 23:00 被阅读0次

作用:使得异步操作更加方便
基本操作:async会返回一个Promise对象,有了这个对象可以使用then,catch进行调用
async的Generatro的一个语法糖

 async function fn(params) {
      let aa =   await 'hello async';//想用await 必须在async函数中
      let data = await aa.split('');
      return data;

    }
    //如果async有多个await,那么then函数会等待所有的await指令,运行完的结果,才去执行
   fn().then(v=>{console.log(v)}).catch(e=>console.log(e))
  //["h", "e", "l", "l", "o", " ", "a", "s", "y", "n", "c"]

//----------------------------------------------------------------------------------------------------
async function f2(){
      throw new Error('出错了');
}
f2().then(v=>console.log(v)).catch(e=>console.log(e));//Error: 出错了
//----------------------------------------------------------------------------------------------------
await 出错之后不会执行后面的函数 想要执行后面的函数 要这样做
  async function f2(){
    try{
        await Promise.reject('出错了')
    }catch(Error){

    }
    return await Promise.resolve('hello')
}
f2().then(v=>console.log(v)).catch(e=>console.log(e));//hello

需求:获取一个天气

     const getJSON = function(url){
            return new Promise((resolved,rejected)=>{
                    const xhr = new XMLHttpRequest();
                    xhr.open('Get',url);
                    xhr.onreadystatechange = handler;
                    xhr.responseType = 'json';
                    xhr.setRequestHeader('Accept','application/json');
                    //发送
                    xhr.send();
                    function handler(){
                        console.log(this);
                        if(this.readyState === 4){
                            if(this.status == 200){
                                resolved(this.response);
                            }else{
                                rejected(new Error(this.statusText))
                            }
                        }
                    }
            })
        }
        async function getNowWeather(url){
            // 发送ajax 获取天气信息
           let res = await getJSON(url);
        //    let arr = await res.weather 根据上一个结果做另外一个请求,返回两个结果
           console.log(res);
           return res.data;
        }
getNowWeather('https://www.qweather.com/v2/current/condition/s/shanghai-101020100.html?lang=&_=1623856500')
        .then(now=>{
            console.log(now)
        })

总结Generator Promise async

  1. 解决回调地域的问题
  2. 使得异步操作显得更加方便

相关文章

  • es6-async的用法

    作用:使得异步操作更加方便基本操作:async会返回一个Promise对象,有了这个对象可以使用then,catc...

  • ES6-async(2)

    基本用法async函数返回一个 Promise 对象,可以使用then方法添加回调函数。当函数执行的时候,一旦遇到...

  • ES6-async函数

    ES017标准引入了async函数,使得异步操作变的更加方便;async函数是什么,一句话;探究式Generato...

  • ES-6--数据结构

    Set的用法,WeakSet的用法,Map的用法,WeakMap的用法 Set()基本用法 Set的add,del...

  • MyBatis XML使用方式

    内容: select用法 insert用法 update用法 delete用法 多个接口参数的用法 动态代理实现原...

  • icon 用法

    icon 的5种用法 icon有5种常用的用法: img 用法 background 用法 background ...

  • 基础函数代码范例

    if-else 的用法 switch-case 的用法 while 的用法 do-while 的用法 for 遍历...

  • JavaScript 常用控制流程代码范例

    if-else 的用法 switch-case 的用法 while 的用法 do-while 的用法 for 遍历...

  • Swift 4.0 数组、集合Set、字典相关常用用法总结

    数组用法 集合Set用法 字典用法

  • 5_Linux进阶

    关键词:find的用法、grep的用法、file的用法、which和whereis的用法、gzip bzip2 t...

网友评论

      本文标题:es6-async的用法

      本文链接:https://www.haomeiwen.com/subject/fmcqyltx.html