传统的回调函数:
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><script>function hot(fn) {setTimeout(() => {fn('吃火锅')}, 2000)}function tea(fn) {setTimeout(() => {fn('喝奶茶')}, 400)}//先吃火锅在喝奶茶hot(function (data) {console.log(data)tea(function (data) {console.log(data)})})</script></body> </html>
Promise 知识点
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><script>//resole可以将异步数据传递出来function tea() {return new Promise((resole) => {setTimeout(() => {resole('喝奶茶')}, 1000)})}//resole可以将异步数据传递出来function hot() {return new Promise((resole) => {setTimeout(() => {resole('吃火锅')}, 5000)})}//通过then拿异步数据 hot().then((data) => {console.log(data)//返回promise对象return tea()})//tea 的promise对象.then((data) => {console.log(data)})</script></body> </html>
async
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><script>//async 函数 :在函数前面加上async 就是async 函数//函数内部 可以写一个 await//await后面可以加一个 promise对象//promise 对象前面加个await 可以获取 resolve传递出来的异步值。function getHot() {return new Promise((resole) => {setTimeout(() => {resole('火锅')}, 5000)})}function getTea() {return new Promise((resole) => {setTimeout(() => {resole('奶茶')}, 2000)})}async function getData(params) {let tea = await getTea()console.log(tea)let hot = await getHot()console.log(hot)}//getData() async function getData2(params) {let hot = await new Promise((resole) => {setTimeout(() => {resole('火锅')}, 2000)})console.log(hot)let tea = await new Promise((resole) => {setTimeout(() => {resole('奶茶')}, 5000)})console.log(tea)}getData2()</script></body> </html>