ES6---（4）async的用法

一、async简介

1、async函数的基本用法

async function f() {
     
	// return await 'hello async';
	let s = await "hello async";
	let data = await s.split('');
	return data;
}

• 使异步操作更加方便，会等待一个await执行完后再执行下一个。
• 会返回一个Promise对象。

1. 没有显式return，相当于return Promise.resolve(undefined);
2. return非Promise的数据data，相当于return Promise.resolve(data);
3. return Promise, 会得到Promise对象本身

• async可以看做是generator的语法糖

如果async函数中有多个await 那么then函数会等待所有的await指令运行完 再去执行

		f().then(v => {
     
            console.log(v);
        }).catch(e => {
     
            console.log(e);
        })

出错情况

        async function f2() {
     
            // throw new Error("出错了!");
            try {
     
                await Promise.reject("出错了");
            } catch (error) {
     }

            return await Promise.resolve("hello");
        }
        f2().then(succ => {
     
            console.log(succ);
        }).catch(err => {
     
            console.log(err);
        })

二、async实例–获取天气接口数据并封装

可以对接口获得的数据进行处理，返回自己需要的数据。

        const getJSON = function(url) {
     
            // 返回一个promise对象
            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.readyState);
                    // 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);
            // console.log(res);
            // 获取数据
            let arr = await res.data;
            // 返回昨天的天气
            return arr.yesterday;
        }
        getNowWeather("https://api.vvhan.com/api/weather?city=北京&type=week").then(
            now => {
     
                console.log(now);
            }
        )