11. async异步函数的用法

async作用

使得异步操作更加方便，它会返回一个Promise对象，并用 then() catch() 接收返回结果

async是Generator的语法糖，使之更加易于阅读

async function fn() {//假设这里需要向服务器多次请求
let str = await 'hellow async';
let data = await str.split('');//await的作用就是让上一次请求返回结果后，再进行这一步操作
return data;//最终需要return将结果返回出去
}

//如果async函数中有多个await，那么then函数会等待所有的await指令运行完毕后，接收返回的结果并去执行相应的操作
fn().then(v => {
console.log(v);//(11) ["h", "e", "l", "l", "w", " ", "a", "s", "y", "n", "c"]
})

try{} catch(err){} 语句

由于Promise对象返回结果就不再执行下方的函数了，需要用try{} catch{}，它可以测试代码中的错误。try 部分包含需要运行的代码，而 catch 部分包含错误发生时运行的代码

执行顺序：try{} 内的函数运行错误，则运行 catch(err){} 内的代码

try {
     可能出现异常的代码（包括不会出现异常的代码）
} catch (err) { //()里为接收try{}代码块中出现异常的类型
     如果出现异常时的处理方式
}

//案例
let arr = null;
try {
    document.write(arr[0]);
} catch (err) {
    document.writeln("Error name: " + err.name + " --");
    document.writeln("Error message: " + err.message);
}

Error.name的六种值对应的信息：

TypeError：操作数据类型错误

EvalError：eval()的使用与定义不一致

RangeError：数值越界

ReferenceError：非法或不能识别的引用数值

SyntaxError：发生语法解析错误

URIError：URI处理函数使用不当

try{} catch(err){} finally{} 语句

提供了一种方法来处理可能发生在给定代码块中的某些或全部错误，同时仍保持代码的运行。如果发生了没有处理的错误，js只给用户提供它的普通错误信息，就好象没有错误处理一样

try {
   //可能发生错误的语句。
} catch(err) { //()里为接收try{}代码块中出现异常的类型
   //如果出现异常时的处理方式
} finally {  
   //可选项。在所有其他过程发生之后无条件执行的语句
} 

//案例
let obj = null;
try {
    console.log(obj[0]);
} catch (err) {
    console.log("Error name: " + err.name + "");//Error name: TypeError
    console.log("Error message: " + err.message);//Error message: Cannot read property '0' of null
}
finally {
    console.log("程序可以继续运行");//程序可以继续运行
}

执行顺序：

obj创建为空对象，try{}把obj当做数组来调用，就会产生 TypeError / 操作数据类型错误 的异常

catch (err)捕获到 TypeError 异常，通过err.name打印了错误类型, err.message打印了错误的详细信息

finally{} 无论有无异常都会继续执行

案例：获取天气接口，now的数据

async调取Promise封装的函数，通过then获取返回结果

const getJSON = function (url) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();//创建一个 `XMLHttpRequest` 对象
        xhr.open('GET', url);//打开xhr,GET方法打开传入的url
        xhr.onreadystatechange = handler;//调用当前状态发生改变的回调函数
        xhr.responseType = 'json';//约定返回数据的类型
        xhr.setRequestHeader('Accept', 'application/json');//设置请求头
        xhr.send();//发送

        function handler() { //创建对当前状态判断的回调函数
            if (this.readyState === 4) {
                if (this.status === 200) {
                    resolve(this.response);
                } else {
                    reject(new Error(this.statusText));
                }
            }
        }
    })
}

async function getNowWeather(url) {
    //发送ajax,获取实况天气
    res = await getJSON(url);
    console.log(res);
    //获取HeWeather6 now的数据
    let arr = await res.HeWeather6;
    return arr[0].now;
}

getNowWeather('https://free-api.heweather.net/s6/weather/now?location=beijing&key=4693ff5ea653469f8bb0c29638035976')
    .then(now => {
    console.log(now);
})