ES6---(4)async的用法

x33g5p2x  于2021-09-24 转载在 其他  
字(1.4k)|赞(0)|评价(0)|浏览(431)

一、async简介

1、async函数的基本用法

  1. async function f() {
  2. // return await 'hello async';
  3. let s = await "hello async";
  4. let data = await s.split('');
  5. return data;
  6. }
  • 使异步操作更加方便,会等待一个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指令运行完 再去执行

  1. f().then(v => {
  2. console.log(v);
  3. }).catch(e => {
  4. console.log(e);
  5. })
出错情况
  1. async function f2() {
  2. // throw new Error("出错了!");
  3. try {
  4. await Promise.reject("出错了");
  5. } catch (error) {}
  6. return await Promise.resolve("hello");
  7. }
  8. f2().then(succ => {
  9. console.log(succ);
  10. }).catch(err => {
  11. console.log(err);
  12. })

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

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

  1. const getJSON = function(url) {
  2. // 返回一个promise对象
  3. return new Promise((Resolved, Rejected) => {
  4. const xhr = new XMLHttpRequest();
  5. // 打开网址
  6. xhr.open('GET', url);
  7. // 状态改变,调用函数
  8. xhr.onreadystatechange = handler;
  9. xhr.responseType = 'json';
  10. xhr.setRequestHeader("Accept", 'application/json');
  11. // 发送
  12. xhr.send();
  13. function handler() {
  14. // console.log(this.readyState);
  15. // console.log(this);
  16. if (this.readyState === 4) {
  17. if (this.status === 200) {
  18. Resolved(this.response);
  19. } else {
  20. Rejected(new Error(this.statusText));
  21. }
  22. }
  23. }
  24. })
  25. }
  26. async function getNowWeather(url) {
  27. // 发送Ajax
  28. let res = await getJSON(url);
  29. // console.log(res);
  30. // 获取数据
  31. let arr = await res.data;
  32. // 返回昨天的天气
  33. return arr.yesterday;
  34. }
  35. getNowWeather("https://api.vvhan.com/api/weather?city=北京&type=week").then(
  36. now => {
  37. console.log(now);
  38. }
  39. )

相关文章