视频资源来自：b站coderwhy王红元老师——最全最新Vue、Vuejs教程，从入门到精通
文章仅为个人观看视频后的学习心得笔记，用于个人查看和记录保存。文中定有疏漏错误之处，恳请指正。
Promise是异步编程的一种解决方案。
回调地狱
Promise的基本使用
定时器的异步事件
参数 -> 函数（resolve,reject）
resolve,reject本身又是函数
链式编程
new Promise((resolve,reject) =>{
setTimeout(() =>{
resolve()
},1000)
}).then(() =>{
console.log('Hello world')
return new Promise((resolve ,reject) =>{
setTimeout(() =>{
resolve()
},1000)
})
}).then(() =>{
console.log('Hello vuejs')
return new Promise((resolve ,reject) =>{
setTimeout(() =>{
resolve()
},1000)
})
})
什么情况会用到Promise?
一般情况下，使用Promise对这个异步操作进行封装
new -> 构造函数（1.保存了一些状态信息 2.执行传入的函数）
在执行传入的回调函数时，会传入两个参数，resolve，reject，本身又是函数
请求与处理分离，变得优雅。。
new Promise((resolve,reject) =>{
setTimeout(() =>{
//成功的时候调用resolve
//resolve()
//失败的时候调用reject
reject('error message')
},1000)
}).then(data => {
console.log(data);
console.log(data);
}).catch(err =>{
console.log(err)
})
控制台输出 error message
then前面的函数必须返回一个Promise对象
return Promise.resolve(taskName)
Promise三种状态
<font color=#909534>sync ->synchronization -> 同步</font>
<font color=#909534>async ->asynchronization -> 异步</font>
<font color=#909534>operation -> 操作</font>
wrapped into
网络请求：aaa -> 自己处理（10行）
处理：aaa 111 -> 自己处理（10行）
处理：aaa 222 -> 自己处理
new Promise((resolve ,reject) =>{
setTimeout(()=>{
resolve('aaa')
},1000)
}).then(res =>{
//1.自己处理10行代码
console.log(res,'第一层的10行处理代码');
//2.对结果进行第一次处理
return new Promise((resolve) =>{
resolve(res + '111')
})
}).then(res =>{
console.log(res,'第二层的10行处理代码');
return new Promise(resolve => {
resolve(res + '222')
})
}).then(res =>{
console.log(res,'第三层的10行处理代码');
})
new Promise((resolve ,reject) =>{
setTimeout(()=>{
resolve('aaa')
},1000)
}).then(res =>{
//1.自己处理10行代码
console.log(res,'第一层的10行处理代码');
//2.对结果进行第一次处理
return Promise.resolve(res + '111')
}).then(res =>{
console.log(res,'第二层的10行处理代码');
return Promise.resolve(res + '222')
}).then(res =>{
console.log(res,'第三层的10行处理代码');
})
3.省略掉Promise.resolve
new Promise((resolve ,reject) =>{
setTimeout(()=>{
resolve('aaa')
},1000)
}).then(res =>{
//1.自己处理10行代码
console.log(res,'第一层的10行处理代码');
//2.对结果进行第一次处理
return Promise.resolve(res + '111')
}).then(res =>{
console.log(res,'第二层的10行处理代码');
return Promise.resolve(res + '222')
}).then(res =>{
console.log(res,'第三层的10行处理代码');
})
结果：<img src="https://xiao910888.oss-cn-hangzhou.aliyuncs.com/img/image-20210711224516288.png" alt="image-20210711224516288" style="zoom: 67%;" />
多个 共用一个catch。抓住错误
1.reject，catch
new Promise((resolve ,reject) =>{
setTimeout(()=>{
resolve('aaa')
},1000)
}).then(res =>{
//1.自己处理10行代码
console.log(res,'第一层的10行处理代码');
//2.对结果进行第一次处理
return new Promise((resolve,reject) =>{
// resolve(res + '111')
reject('err')
})
}).then(res =>{
console.log(res,'第二层的10行处理代码');
return new Promise(resolve => {
resolve(res + '222')
})
}).then(res =>{
console.log(res,'第三层的10行处理代码');
}).catch(err =>{
console.log(err);
})
2.throw，catch
new Promise((resolve ,reject) =>{
setTimeout(()=>{
resolve('aaa')
},1000)
}).then(res =>{
//1.自己处理10行代码
console.log(res,'第一层的10行处理代码');
//2.对结果进行第一次处理
// return Promise.resolve(res + '111')
throw 'error message'
}).then(res =>{
console.log(res,'第二层的10行处理代码');
return Promise.resolve(res + '222')
}).then(res =>{
console.log(res,'第三层的10行处理代码');
}).catch(err =>{
console.log(err);
})
1.ajax异步访问：
两个请求同时到达时才能处理
//请求一：
let isResult1 =false
let isResult2 =false
$ajax({
url: '',
success: function () {
console.log('结果一');
isResult1 = true
handleResult()
}
})
//请求二：
$ajax({
url: '',
success: function () {
console.log('结果二');
isResult2 = true
handleResult()
}
})
function handleResult() {
if(isResult1 &&isResult2){
}
}
<font color=#909534>iterator：可迭代的（数组）</font>
2.Promise的异步访问
<script>
Promise.all([
new Promise((resolve,reject) =>{
setTimeout(() =>{
resolve('result1')
},2000)
}),
new Promise((resolve,reject) =>{
setTimeout(() =>{
resolve('result1')
},1000)
})
]).then(result =>{
//results是个数组，results[0]代表第一个请求
console.log(results);
})
总目录：
邂逅Vuejs
Vue基础语法
组件化开发
前端模块化
webpack详解
Vue CLI详解
vue-router
Promise的使用
Vuex详解
网络模块封装
项目实战
