函数对象与实例对象
<script>
/*
1.函数对象与实例对象
函数对象：将函数作为对象使用时，简称为函数对象
实例对象：new 函数产生的对象，简称为对象 */
function Person(name,age){//构造函数
this.name=name;
this.age=age;
}
let p=new Person('张三',21);//p是实例
console.log(p);
</script>
回调函数的分类
<script>
/*
1. 同步回调：
理解：立即执行，完全执行完了才结束，不会放入回调队列中
例子：数据遍历相关的回调函数 / Promise的excutor函数
2. 异步回调
理解：不会立即执行，会放入回调队列中将来执行
例子：定时器回调 / ajax回调 / Promise的成功|失败的回调 */
// 同步回调
const arr=[1,3,5,7,9];
arr.forEach((item)=>{//同步的回调函数，不会放入队列
console.log(item);
})
console.log('forEach之后');
// 异步回调
setTimeout(()=>{//异步的回调，放入队列
console.log('定时器执行了');
},1000);
console.log('定时器执行之后');
</script>
错误与错误的捕获
<script>
/*
目标：进一步理解JS中的错误（error）和错误处理
mdn文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Error
1. 错误的类型
Error：所有的错误的父类型
ReferenceError：引用的变量不存在
TypeError：数据类型不正确的错误
RangeError：数据值不在其所允许的范围内
SyntaxError：语法错误
2. 错误处理
捕获错误：try...catch
抛出错误：throw error
3. 错误对象
message属性：错误相关信息
stack属性：函数调用栈记录信息 */
// ReferenceError：引用的变量不存在
// console.log(a);
//TypeError：数据类型不正确的错误
/* let b={};
b(); */
/* let b=null;
console.log(b.a); */
// RangeError：数据值不在其所允许的范围内
/* function demo(){
demo();
}
demo(); */
//SyntaxError：语法错误
// const a="""";
// 捕获一个错误
/* try{
console.log(a);//有可能出现错误的代码
} catch(err){
console.log(err);// 如果try中出现了错误，携带错误对象，来到catch中
}
console.log(1); */
// 抛出一个错误
function demo(){
// 获取当前时间
const time=Date.now();
//若是奇数，逻辑正常执行，若是偶数，抛出异常
if(time%2===1){
console.log('奇数，可以执行',time);
}else{
/* let error=new Error('偶数，不执行');
console.log(error);
throw error; */
throw new Error('偶数，不执行');
}
}
try{
demo();
} catch(err){
debugger;
console.log(err);
}
console.log('我可以继续执行，哈哈')
</script>
Error - JavaScript | MDN (mozilla.org)
初始Promise
理解
- 抽象表达
- Promise是一门新的技术（ES6规范）
- Promise是JS中进行异步编程的新解决方案
备注：旧方案是单纯使用回调函数
- 具体表达
- 从语法上来说：Promise是一个构造函数
- 从功能上来说：promise对象用来封装一个异步操作并可以取其成功 / 失败的结果值
<script>
/* let promise1=new Promise(function(resolve,reject){//执行器函数（excutor）同步的回调
// 当我们new了一个Promise实例后，实例自身的状态是初始化状态（pending）
// 执行器函数中，写异步代码
setTimeout(function(){
// resolve('foo');// 调用resolve，可以将Promise实例对象由 初始化对象（pending） 变为 成功状态（resolved）
reject('失败了'); // 调用reject，可以将Promise实例对象由 初始化状态（pending） 变为 失败状态（rejected），同时指定失败的原因（reason）
},3000);
});
promise1.then(
value=>console.log(value),
reason=>console.log(reason)
);
console.log(promise1); */
// 使用Promise+xhr包装一个ajax请求
function myAsyncfunction(url){
return new Promise((resolve,reject)=>{
const xhr=new XMLHttpRequest();
xhr.open('get',url);
xhr.onload = () => resolve(JSON.parse(xhr.response));
xhr.onerror = () => reject(xhr.statusText);
xhr.send();
});
}
let a=myAsyncfunction('https://api.apishop.net/common/joke/getJokesByRandom?apiKey=Q7X8ayL291c5ebc24c1d5e40abffa2377360e2c0229445f&pageSize=6');
a.then(
result=>console.log('onResolved',result),
error=>console.log('onRejected',error)
)
</script>
为什么要用Promise
<script>
/*
优势：
1. 指定回调函数的方式更加灵活：
旧的：必须在启动异步任务前指定
promise：启动异步任务 => 返回promise对象 => 给promise对象绑定回调函数（甚至可以在异步任务
2. 支持链式调用，可以解决回调地狱问题
什么是回调地狱？回调函数嵌套调用，外部回调函数异步执行的结果是嵌套的回调函数执行的条件
回调地狱的缺点？不便于阅读、不便于异常处理
解决方案？promise链式调用
终极解决方案？async/await */
//1. 纯回调函数形式处理异步任务（伪代码，主要看逻辑）
/* // 成功的回调函数
function successCallback(result) {
console.log("声音文件创建成功：" + result);
}
// 失败的回调函数
function failureCallback(error) {
console.log("声音文件创建失败：" + error);
}
// 使用纯回调函数形式
createAudioFileAsync(audioSettings,successCallback,failureCallback); */
// 2. 使用Promise处理异步任务（伪代码，主要看逻辑）
/* const promise = createAudioFileAsync(audioSettings);
setTimeout(()=>{
promise.then(successCallback,failureCallback);
},3000); */
//演示回调地狱（伪代码，主要看逻辑）
/* doSomething(function(result){
doSomethindElse(result,function(newResult){
doThirdThing(newResult,function(finalResult){
console.log('Got the final result: '+finalResult);
},failureCallback3);
},failureCallback2);
},failureCallback1); */
// 使用promise的链式调用解决回调地狱（伪代码，主要看结构）
/* doSomething()
.then(function(result){
return doSomethingElse(result);
})
.then(function(newResult){
return doThirdThing(newResult);
})
.then(function(finalResult){
console.log('Got the final result: '+finalResult);
})
.catch(failureCallback); */
// Promise配合async / await：回调地狱的终极解决方案（伪代码，主要看结构）
/* async function request(){
try{
const result=await doSomething();
const newResult=await doSomethingElse(result);
const finalResult=await doThirdThing(newResult);
} catch(error){
failureCallback(error);
}
} */
</script>
Promise基本使用
<script>
/*
1. 重要语法
Promise（excutor）构造函数
Promise.prototype.then方法
2. 基本编码流程
1. 创建promise对象（pending状态），指定执行器函数
2. 在执行器函数中启动异步任务
3. 根据结果做不同处理
1. 如果成功了，调用resolve()，指定成功的value，变为resolved状态
2. 如果失败了，调用了reject()，指定失败的reason，变为rejected状态
4. 能promise指定成功或失败的回调函数来获取成功的value或失败的reason
3. promise对象的状态
1. 三个状态：
pending：未确定的，起始时的状态
resolved：解决/成功的，调用resolve()后的状态
rejected：拒绝/失败的，调用reject()后的状态
2. 2种状态改变
pending ===> resolved
pending ===> rejected
3. 状态只能改变一次 */
//创建promise对象（pending状态），指定执行器函数
new Promise((resolve,reject)=>{
//在执行器函数中启动异步任务
setTimeout(()=>{
const time=Date.now();
//如果成功了，调用resolve()，指定成功的result，变为resolved状态
if(time%2===1){
resolve('奇数，成功了',time);
}
//如果失败了，调用reject()，指定失败的reason，变为rejected状态
else{
reject('偶数，失败了',time);
}
},2000);
}).then(
// 给promise指定成功或失败的回调函数来获取成功的result或失败的reason
result=>{
console.log(result);
},
error=>{
console.log(error);
}
)
</script>
Promise封装ajax
<script>
function sendAjax(url){
return new Promise((resolve,reject)=>{//执行器函数，同步的问题
//开启异步任务
const xhr=new XMLHttpRequest();
xhr.onreadystatechange=()=>{
if(xhr.readyState!==4)
return;
if(xhr.status>=200 && xhr.status<=299){
resolve(JSON.parse(xhr.response));
}
else{
reject(new Error('请求失败'));
}
}
xhr.open('get',url);
xhr.send();
})
}
sendAjax('https://api.apishop1.net/common/joke/getJokesByRandom?apiKey=登录后获取&pageSize=6')
.then(
result=>console.log(result),
error=>console.log(error.message)
)
</script>
Promise的API
<script>
/*
1. Promise构造函数：Promise(excutor){}
excutor函数：同步执行 (resolve,reject)=>{}
resolve函数：内部定义成功时我们调用的函数 result=>{}
reject函数：内部定义失败时我们调用的函数 error=>{}
说明：excutor会在Promise内部立即同步回调，异步操作在执行器中执行
2. Promise.prototype.then方法：(onResolved,onRejected)=>{}
onResolved函数：成功的回调函数 (result)=>{}
onRejected函数：失败的回调函数 (error)=>{}
说明：指定用于得到成功result的成功回调和用于得到失败error的失败回调，返回一个新的promise对象
3. Promise.ptorotype.catch方法：(onRejected)=>{}
onRejected函数：失败的回调函数(error)=>{}
说明：then()的语法糖，相当于：then(undefined,onRejected)
4. Promise.resolve方法：(result)=>{}
result：成功的数据或promise对象
返回一个成功/失败的promise对象
5. Promise.reject方法：(error)=>{}
error：失败的原因
说明：返回一个失败的promise对象
6. Promise.all方法：(promises)=>{}
promises：包含n个promise的数组
说明：返回一个新的promise，只有所有的promise都成功，只要有一个失败了就直接失败
7. Promise.race方法：(promises)=>{}
promises：包含n个promise的数组
说明：返回一个新的promise，第一个完成的promise的结果状态就是最终的结果状态 */
/* new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve(1);
},1000);
}).then(
result=>console.log(result),
error=>console.log(error)
) */
/* new Promise((resolve,reject)=>{
setTimeout(()=>{
reject(1);
},1000);
}).catch(error=>{
console.log(error);
}) */
/* new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve(1);
reject(0);//不执行，说明两个方法只能执行一个
},1000);
})
.then(result=>console.log(result))
.catch(error=>console.log(error)); */
/* let p1=new Promise((resolve,reject)=>{
// setTimeout(()=>{
// reject(1);
// },1000);
reject(1);
});
console.log(p1);
let p2=Promise.reject(2);
console.log(p2);
let p3=Promise.resolve(3);
console.log(p3); */
let p1=new Promise((resolve,reject)=>{
reject(1);
});
let p2=Promise.resolve(2);
let p3=Promise.resolve(3);
let p4=Promise.all([p1,p2,p3]);
// console.log(p4);
p4.then(
result=>console.log('成功了',result),
error=>console.log('失败了',error)
)
let p5=Promise.race([p2,p1,p3]);
p5.then(
result=>console.log('成功了',result),
error=>console.log('失败了',error)
)
</script>
一个Promise实例指定多个成功与失败的回调
<script>
/*
1. 如何改变promise的状态？
1. resolve(result)：如果当前是pendding就会变为resolved
2. reject(error)：如果当前是pendding就会变为rejected
3. 抛出异常：如果当前是pendding就会变为rejected
2. 一个promise指定多个成功/失败回调函数，都会调用吗？
当promise改变为对应状态时都会调用 */
let p=new Promise((resolve,reject)=>{
throw new Error('失败了');
/* setTimeout(()=>{
// resolve(1);
throw new Error('失败了');
},1000); */
});
p.then(
result=>console.log('成功1',result),
error=>console.log('失败1',error)
);
p.then(
result=>console.log('成功2',result),
error=>console.log('失败2',error)
);
p.then(
result=>console.log('成功3',result),
error=>console.log('失败3',error)
);
</script>
改变状态与指定回调先后顺序问题
<script>
/*
3. 改变Promise状态和指定回调函数谁先谁后？
1. 都有可能，正常情况下是先指定回调再改变状态，但也可以先改变状态再指定回调
2. 如何先改状态再指定回调？
1. 在执行器中直接调用resolve()/reject()
2. 延迟更长时间才调用then()
3. 什么时候才能得到数据？
1. 如果先指定的问题，那当状态发生改变时，回调函数就会调用，得到数据
2. 如果先改变的状态，那当指定回调时，回调函数就会调用，得到数据 */
//正常写法：先指定了成功与失败的回调，后改变的状态
let p=new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve(1);
},1000);
});
p.then(
result=>console.log(result),
error=>console.log(error)
)
//先改变状态，后指定回调
let p=new Promise((resolve,reject)=>{
resolve(1);
});
p.then(
result=>console.log(result),
error=>console.log(error)
)
</script>
then方法返回值问题
<script>
/*
4. promise.then()返回的新promise的结果状态由什么决定？
1. 简单表达：由then()指定的回调函数执行的结果决定
2. 详细表达：
1. 如果抛出异常，新promise变为rejected，error为抛出的异常
2. 如果返回的是非promise的任意值，新promise变为resolved，result为返回的值
3. 如果返回的是另一个新promise，此promise的结果就会成为新promise的结果 */
new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve(1);
// reject(1);
},1000);
}).then(
result=>{
console.log('成功了1',result);
// return '你成功了';
throw new Error('出错了');
},
error=>{
console.log('失败了1',error);
// return '你失败了';
return Promise.reject('你失败了');
}
).then(
result=>console.log('成功了2',result),
error=>console.log('失败了2',error)
)
</script>
then的链式调用
<script>
/*
promise如何串联多个操作任务？
1. promise的then()返回一个新的promise，可以开成then()的链式调用
2. 通过then的链式调用串连多个同步/异步任务 */
new Promise((resolve, reject) => {
console.log("开启了第1个异步任务");
setTimeout(() => {
resolve("数据1");
}, 1000);
})
.then((result) => {
console.log("第1个异步任务成功了，值为：" + result);
return result;
})
.then((result) => {
console.log("开启了第2个同步任务");
let a = "数据2";
console.log("第2个同步任务成功了，值为：" + a);
return a;
})
.then((result) => {
console.log("开启了第3个异步任务，使用第2个任务的值：" + result);
return new Promise((resolve, reject) => {
setTimeout(() => {
let data = "数据3";
resolve(data);
}, 1000);
});
}).then(
result=>{
console.log('第3个异步任务成功了，值为：'+result);
}
)
</script>
Promise错误穿透与中断Promise链
<script>
/*
6. promise错误穿透？
1. 当使用promise的then链式调用时，可以在最后指定失败的回调
2. 前面任何操作出了错误，都会传到最后失败的回调中处理
7. 中断promise链？
1. 当使用promise的then链式调用时，在中间中断，不再调用后面的回调函数
2. 办法：在回调函数中返回一个pendding状态的promise对象 */
new Promise((resolve,reject)=>{
setTimeout(()=>{
// reject(1);
resolve(1);
},1000);
})
.then(
result=>console.log('成功了1',result),
/* error=>{
throw error;//如果编码人员没有在then方法里面指定失败的回调，相当于写了该行代码
} */
)
.then(
result=>console.log('成功了2',result)
)
.then(
result=>{
console.log('成功了3',result);
throw new Error('我失败了');
}
)
.then(
result=>console.log('成功了4',result)
)
.catch(
error=>{
console.log('失败了',error);
return new Promise(()=>{});//中断Promise链
}
)
.then(
result=>console.log('我是一个不太和谐的输出，值为：'+result)
)
</script>
作者：(x²+y²-1)³=x²y³
-------------------------------------------
个性签名：独学而无友，则孤陋而寡闻。做一个灵魂有趣的人！
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
