@import
@import url(“index.css”);
导入CSS引用
模块化
var username = “二哥”; //定义一个变量,将来在所有的页面中使用
var age = 18
var fn = function () {
return username + “:” + age
}
//导出(export)
// 导出这个变量
// 暴露
export {
username,
age,
fn
}
//导入( import)
// 按需导入 ./表示同级目录
import { username, age } from “./base.js”
console.log(username); //二哥
console.log(age); //18
//导出(export default)
var obj = {
username: “二哥”,
age: 18,
fn: function () {
return this.username + “:” + this.age
}
}
// export default
export default obj
1.export和export default区别:
//相同点:都可以导出模块
// 不同点:export可以写多次
// export default只能写一次
2.为什么要模块化?
将相似功能的代码提取出来放到一个文件中,通过export 或者export default 暴露
在使用的时候通过import 导入
3.// export default 命令。
// - 在一个文件或模块中,export、import 可以有多个,export default 仅有一个。
// - export default 中的 default 是对应的导出接口变量。
// - 通过 export 方式导出,在导入时要加{ },export default 则不需要。
// - export default 向外暴露的成员,可以使用任意变量来接收。
day04-03-promise
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 什么是Promise
// Promise是异步编程的解决方案,其实它是一个构造函数,在构造函数身上有自己的方法all reject resolve,在它的原型有then和catch等方法
// Promise的特点?
// 1、Promise的状态不受外界的影响。
// Promise 异步操作有三种状态:pending(进行中)、fulfilled(已成功)和 rejected(已失败)。除了异步操作的结果,任何其他操作都无法改变这个状态。
// 2、一旦开始,中途无法改变这个状态
// Promise 对象只有:从 pending 变为 fulfilled 和从 pending 变为 rejected 的状态改变。只要处于 fulfilled 和 rejected ,状态就不会再变了即 resolved(已定型)。
// 如果不设置回调函数,Promise 内部抛出的错误,不会反应到外部。当处于 pending 状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)
console.dir(Promise)
// 定义一个promise对象
let promise = new Promise((resolve, reject) => {
// resolve 成功的回调函数
// reject 失败的回调函数
// setTimeout 开启一个异步操作
// Promise 一旦开始,立即执行
setTimeout(function () {
console.log("执行一个promise异步操作");
resolve("执行成功了") //将成功的结果返回
}, 3000)
})
// .then(成功回调函数,失败回调函数)
promise.then((result) => {
console.log(result); //执行成功了
}, (err) => {
console.log(err);
})
</script>
</body>
</html>
day04-04-promise成功案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">点击按钮开始异步操作</button>
<script>
let oBtn = document.querySelector("#btn");
let promiseFn = () => {
console.log(1);
let promise = new Promise((resolve, reject) => {
setTimeout(function () {
console.log(2);
resolve("成功666")
}, 2000)
})
return promise
}
oBtn.onclick = function () {
// console.log(promiseFn());
// promiseFn() 是一个promise对象,就可以使用.then()
promiseFn().then(result => {
console.log(result); //成功666
})
}
// 1 2 成功
</script>
</body>
</html>
day04-05-promise失败案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">点击按钮开始异步操作</button>
<script>
let oBtn = document.querySelector("#btn");
let promiseFn = () => {
console.log(1);
let promise = new Promise((resolve, reject) => {
// 随机数1-10随机整数
let num = Math.ceil(Math.random() * 10)
console.log(`num的值:${num},num>6成功,否则失败`);
setTimeout(function () {
if (num > 6) {
resolve("成功666") //执行成功回调
} else {
reject("失败555") //执行失败回调
}
}, 2000)
})
return promise
}
oBtn.onclick = function () {
// console.log(promiseFn());
// promiseFn() 是一个promise对象,就可以使用.then()
promiseFn().then(result => {
// 成功的回调
console.log(result); //成功666
}, (err) => {
// 失败的回调
console.log(err);
})
}
// 1 2 成功
</script>
</body>
</html>
day04-06-捕获异常catch()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">点击按钮开始异步操作</button>
<script>
let oBtn = document.querySelector("#btn");
let promiseFn = () => {
console.log(1);
let promise = new Promise((resolve, reject) => {
// 随机数1-10随机整数
let num = Math.ceil(Math.random() * 10)
console.log(`num的值:${num},num>6成功,否则失败`);
setTimeout(function () {
if (num > 6) {
resolve("成功666") //执行成功回调
} else {
reject("失败555") //执行失败回调
}
}, 2000)
})
return promise
}
oBtn.onclick = function () {
// console.log(promiseFn());
// promiseFn() 是一个promise对象,就可以使用.then()
promiseFn().then(result => {
// 成功的回调
console.log(result); //成功666
}).catch(err => {
// 异常捕获
console.log(err);
})
}
// 1 2 成功
</script>
</body>
</html>
day04-07-then()的链式调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function promiseFn1() {
let promise1 = new Promise((resolve, reject) => {
// setTimeout 定义一个异步操作
setTimeout(() => {
let num = Math.ceil(Math.random() * 10) //1-10的随机整数
console.log(`num的值:${num}`);
console.log("promiseFn1");
if (num > 6) {
resolve("num大于6--成功")
} else {
reject("失败")
}
}, 1000)
})
return promise1
}
function promiseFn2() {
let promise1 = new Promise((resolve, reject) => {
// setTimeout 定义一个异步操作
setTimeout(() => {
let num = Math.ceil(Math.random() * 10) //1-10的随机整数
console.log(`num的值:${num}`);
console.log("promiseFn2");
if (num > 3) {
resolve("num大于3--成功")
} else {
reject("失败")
}
}, 1000)
})
return promise1
}
function promiseFn3() {
let promise1 = new Promise((resolve, reject) => {
// setTimeout 定义一个异步操作
setTimeout(() => {
let num = Math.ceil(Math.random() * 10) //1-10的随机整数
console.log(`num的值:${num}`);
console.log("promiseFn3");
if (num > 5) {
resolve("num大于5--成功")
} else {
reject("失败")
}
}, 1000)
})
return promise1
}
// 需求
// 如果promiseFn1()执行成功了在执行promiseFn2(),否则不再执行promiseFn2()
// 如果promiseFn2()成功了再执行promiseFn3()
promiseFn1().then(result => {
console.log(result);
return promiseFn2()
}).then(result2 => {
console.log(result2);
return promiseFn3()
}).then(result3 => {
console.log(result3);
return promiseFn1()
})
</script>
</body>
</html>
day04-08-all()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function promiseFn1() {
let promise1 = new Promise((resolve, reject) => {
// setTimeout 定义一个异步操作
setTimeout(() => {
let num = Math.ceil(Math.random() * 10) //1-10的随机整数
console.log(`num的值:${num}`);
console.log("promiseFn1");
if (num > 6) {
resolve("num大于6--成功")
} else {
reject("失败")
}
}, 1000)
})
return promise1
}
function promiseFn2() {
let promise1 = new Promise((resolve, reject) => {
// setTimeout 定义一个异步操作
setTimeout(() => {
let num = Math.ceil(Math.random() * 10) //1-10的随机整数
console.log(`num的值:${num}`);
console.log("promiseFn2");
if (num > 3) {
resolve("num大于3--成功")
} else {
reject("失败")
}
}, 1000)
})
return promise1
}
function promiseFn3() {
let promise1 = new Promise((resolve, reject) => {
// setTimeout 定义一个异步操作
setTimeout(() => {
let num = Math.ceil(Math.random() * 10) //1-10的随机整数
console.log(`num的值:${num}`);
console.log("promiseFn3");
if (num > 5) {
resolve("num大于5--成功")
} else {
reject("失败")
}
}, 1000)
})
return promise1
}
// 需求
// 如果promiseFn1()执行成功了在执行promiseFn2(),否则不再执行promiseFn2()
// 如果promiseFn2()成功了再执行promiseFn3()
// all([异步1,异步2,...]) 是Promise中的一个API
// 多个异步操作并行执行,只有都成功了才会返回成功的结果,只要有一个失败就失败了
console.dir(Promise)
Promise.all([promiseFn1(), promiseFn2(), promiseFn3()]).then(result => {
console.log(result); //['num大于6--成功', 'num大于3--成功', 'num大于5--成功']
})
</script>
</body>
</html>
day04-09-race()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function promiseFn1() {
let promise1 = new Promise((resolve, reject) => {
// setTimeout 定义一个异步操作
setTimeout(() => {
let num = Math.ceil(Math.random() * 10) //1-10的随机整数
console.log(`num的值:${num}`);
console.log("promiseFn1");
if (num > 6) {
resolve("num大于6--成功")
} else {
reject("失败")
}
}, 1000)
})
return promise1
}
function promiseFn2() {
let promise1 = new Promise((resolve, reject) => {
// setTimeout 定义一个异步操作
setTimeout(() => {
let num = Math.ceil(Math.random() * 10) //1-10的随机整数
console.log(`num的值:${num}`);
console.log("promiseFn2");
if (num > 3) {
resolve("num大于3--成功")
} else {
reject("失败")
}
}, 1000)
})
return promise1
}
function promiseFn3() {
let promise1 = new Promise((resolve, reject) => {
// setTimeout 定义一个异步操作
setTimeout(() => {
let num = Math.ceil(Math.random() * 10) //1-10的随机整数
console.log(`num的值:${num}`);
console.log("promiseFn3");
if (num > 5) {
resolve("num大于5--成功")
} else {
reject("失败")
}
}, 1000)
})
return promise1
}
// 需求
// 如果promiseFn1()执行成功了在执行promiseFn2(),否则不再执行promiseFn2()
// 如果promiseFn2()成功了再执行promiseFn3()
// race([异步1,异步2,...]) 是Promise中的一个API
// race()第一个成功直接返回结果,后面的结果不再输出
// 第一个失败了后面不再输出结果
console.dir(Promise)
Promise.race([promiseFn1(), promiseFn2(), promiseFn3()]).then(result => {
console.log(result); //
}, (err) => {
console.log(err);
})
</script>
</body>
</html>
day04-10-Generator
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// Generator 函数---了解
// 两个部分:
// 1、在function后添加*
// 2、在函数内部使用yield关键字,将函数的执行流程挂起
function* fn() {
console.log("001");
yield "1";
console.log("002");
yield "2";
}
let f = fn()
f.next()
f.next()
</script>
</body>
</html>
day04-11-async函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// async 函数返回一个 Promise 对象
// 在function 前边添加async,那么这个函数就变成了async函数
// await 是配合async函数使用的,不能单独使用
function promiseFn1() {
let promise1 = new Promise((resolve, reject) => {
// setTimeout 定义一个异步操作
setTimeout(() => {
let num = Math.ceil(Math.random() * 10) //1-10的随机整数
console.log(`num的值:${num}`);
if (num > 6) {
resolve("num大于6--成功")
} else {
reject("失败")
}
}, 1000)
})
return promise1
}
function promiseFn2() {
let promise1 = new Promise((resolve, reject) => {
// setTimeout 定义一个异步操作
setTimeout(() => {
resolve("成功2")
}, 1000)
})
return promise1
}
function promiseFn3() {
let promise1 = new Promise((resolve, reject) => {
// setTimeout 定义一个异步操作
setTimeout(() => {
resolve("成功3")
}, 1000)
})
return promise1
}
// 给fn变成了异步async函数
async function fn() {
let result1 = await promiseFn1()
let result2 = await promiseFn2()
let result3 = await promiseFn3()
console.log(result1);
console.log(result2);
console.log(result3);
}
fn()
// promiseFn1().then(result => {
// console.log(result);
// return promiseFn2()
// }).then(result2 => {
// console.log(result2);
// return promiseFn3()
// }).then(result3 => {
// console.log(result3);
// return promiseFn1()
// })
</script>
</body>
</html>