10. 回调和promise
2021-06-07 本文已影响0人
yaoyao妖妖
异步加载 JS
ES5
function loadScript (src, callback) {
let script = document.createElement('script')
script.src = src
script.onload = () => { callback(src) }
script.onerr = (err) => { callback(err) }
document.head.append(script)
}
function test (name) {
console.log(name)
}
loadScript('./1.js', function (script) {
if (script.message) {
// 监控上报逻辑
loadScript('./2.js', function (script) {
console.log(script)
})
} else {
console.log(script)
loadScript('./2.js', function (script) {
console.log(script)
loadScript('./3.js', function (script) {
console.log(script)
})
})
}
})
ES6 promise
function loadScript (src) {
// pending,undefined
return new Promise((resolve, reject) => {
let script = document.createElement('script')
script.src = src
script.onload = () => resolve(src)// fulfilled,result
script.onerror = (err) => reject(err)// rejected,error
document.head.append(script)
})
}
loadScript('./1.js')
.then(() => {
return loadScript('./4.js')
}, (err) => {
console.log(err)
})
.then(() => {
loadScript('./3.js')
}, (err) => {
console.log(err)
})
// promise.then(onFulfilled,onRejected)
function test (bool) {
if (bool) {
return new Promise((resolve, reject) => {
resolve(30)
})
} else {
return Promise.reject(new Error('ss'))
}
}
test(0).then((value) => {
console.log(value)
}, (err) => {
console.log(err)
})
function loadScript (src) {
// pending,undefined
return new Promise((resolve, reject) => {
let script = document.createElement('script')
script.src = src
script.onload = () => resolve(src)// fulfilled,result
script.onerror = (err) => reject(err)// rejected,error
document.head.append(script)
})
}
loadScript('./1.js')
.then(() => {
return loadScript('./2.js')
})
.then(() => {
return loadScript('./4.js')
})
.catch(err => {
console.log(err)
})
// throw new Error
const p1 = Promise.resolve(1)
const p2 = Promise.resolve(20)
const p3 = Promise.resolve(3)
// 等待 p1, p2, p3 都执行完成
Promise.all([p1, p2, p3]).then((value) => {
console.log(value)
})
const p1 = () => {
return new Promise((resolve, reject) => {
setTimeout(function () {
resolve(1)
}, 1000)
})
}
const p2 = () => {
return new Promise((resolve, reject) => {
setTimeout(function () {
resolve(2)
}, 3000)
})
}
// p1, p2, p3 有一个执行完成
Promise.race([p1(), p2()]).then((value) => {
console.log(value)
})
学习视频记录