一、async简介
1、async函数的基本用法
async function f() {
// return await 'hello async';
let s = await "hello async";
let data = await s.split('');
return data;
}
- 使异步操作更加方便,会等待一个await执行完后再执行下一个。
- 会返回一个Promise对象。
- 没有显式return,相当于return Promise.resolve(undefined);
- return非Promise的数据data,相当于return Promise.resolve(data);
- 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);
}
)