loadScript函数
有这么一个应用场景：
我们想要动态地加载一个js脚本，然后调用脚本中的某个函数。所以，这其实抽象为，我们需要等待一个异步请求结果，然后做一些操作。
function loadScript(src,callback){
let script=document.creatElement('script');
script.src=src;
script.onload=()=>{
callback(script);
}
document.head.appendChild(script);
}
我们可以用上述的callback机制这么来写。这么写当然没有问题，那么如果我们想要在第一个脚本加载完成之后，去加载第二个脚本，我们就需要在callback里面做这件事，那么代码就会变成这样：
loadScript('/src/index.js', (script)=>{
console.log('cool, the first script from '+script.src+' is loaded!');
loadScript('/src/index2.js', (script)=>{
console.log('now the second script from '+script.src+' is loaded.');
}
});
这样的写法会出现callback金字塔的代码结构。所以我们提出让promise来解决以上的应用场景。
上述场景如果用promise机制来写的话，语法会更加符合逻辑和规律。
Promise--executor
new Promise((resolve,reject)=>{
//do some stuff
resolve('done');
//or
reject(new Error('error message'));
})
生成一个新的Promise对象，会立刻执行executor函数。
promise 对象有内部属性：
- state —— 最初是 “pending”，然后被改为 “fulfilled” 或 “rejected”，
- result —— 一个任意值，最初是 undefined。
当 executor 完成任务时，应调用下列之一：
- resolve(value) —— 说明任务已经完成：
将 state 设置为 "fulfilled"，sets result to value。 - reject(error) —— 表明有错误发生：
将 state 设置为 "rejected"，将 result 设置为 error。
我们经常会在promise中发送异步请求，然后去调用resolve或者reject，实际上，在executor中立即调用它们也是可以的。
//常见用法
new Promise(()=>{
console.log(resolve);
console.log(reject);
setTimeout(()=>{
resolve('done');
},1000);
);
Promise--then, catch
当 promise完成之后，either fulfilled or rejected, 我们可以在promise提供的.then, .catch函数中做进一步的操作。
On settled promises then runs immediately
//when it is resolved
promise.then(
(result)=>console.log(result)
)
// when it is rejected
promise.catch(
(error)=>console.log(error.message)
)
用promise改写loadScript()
function loadScript(src){
return new Promise((resolve,reject)=>{
const script=document.createElement('script');
script.src=src;
document.head.appendChild(script);
script.onload=()=>{resolve(script)};
script.onerror=()=>{reject(new Errror('the script is failed to load '+src))}
})
}
let promise1=loadScript('./index.js');
promise1.then(
(result)=>{console.log(`${result.src} is loaded!`)},
(error)=>{console.log(error.message)}
)
Promise chain
new Promise(function(resolve, reject) {
setTimeout(() => resolve(1), 1000); // (*)
}).then(function(result) { // (**)
alert(result); // 1
return result * 2;
}).then(function(result) { // (***)
alert(result); // 2
return result * 2;
}).then(function(result) {
alert(result); // 4
return result * 2;
});
要看懂这段代码，只需要理解：
promise.then((value)=>return 2*value)会返回一个新的promise, 状态为fulfilled, value为2, 所以我们可以连续调用.then(),形成promise chain.
return Promise
new Promise(function(resolve, reject) {
setTimeout(() => resolve(1), 1000);
}).then(function(result) {
alert(result); // 1
return new Promise((resolve, reject) => { // (*)
setTimeout(() => resolve(result * 2), 1000);
});
}).then(function(result) { // (**)
alert(result); // 2
return new Promise((resolve, reject) => {
setTimeout(() => resolve(result * 2), 1000);
});
}).then(function(result) {
alert(result); // 4
});
(*)处返回的是一个新的promise，js引擎会一直等到这个新的promise resolved之后，再去执行(**)处的.then函数。
返回 promises 允许我们建立异步动作链
应用场景：顺序加载脚本1，脚本2，脚本3，然后调用这些脚本里面的函数（用promise chain来轻松实现）
function loadScript(src){
return new Promise((resolve,reject)=>{
const script=document.createElement('script');
script.src=src;
script.onload=()=>resolve(script);
script.onerror=()=>reject(new Error(src+ 'failed.'));
document.head.appendChild(script);
}
)
}
loadScript('./index1.js')
.then(script=>loadScript('./index2.js'))
.then(script=>loadScript('./index3.js'))
.then(()=>{
one();
two();
three();
})