vue 基础 promise
1.promise基本使用
<script>newPromise((resolve,reject)=>{setTimeout(()=>{//成功//收到data后把 data传递到then那resolve('hello world')//失败//调用 rejectreject('error')},1000)}).then((data)=>{//处理代码
console.log(data);
console.log(data);
console.log(data);}).catch(err=>{
console.log(err);})</script>说明：
- 1.成功时，2个参数 成功时（resolve）失败时（reject）
2.promise失败的时候
<script>newPromise((resolve,reject)=>{setTimeout(()=>{// resolve('hello Vue.js')reject('error message')},1000)}).then(data=>{
console.log(data);},err=>{
console.log(err);})</script>说明：
1.当执行reject的时候就是错误的
2.会把错误信息当做参数 err 传递并打印
3.data是第一个参数，接收成功时的信息
4.err 是第二个参数，接收失败时候的错误信息
3.promise的链式编程一
<script>// 参数 -> 函数(resolve,reject)// resolve ,reject 本身又是函数// 链式编程newPromise((resolve, reject)=>{//第一次网络请求setTimeout(()=>{resolve();},1000);}).then(()=>{// 第一次结果的处理
console.log("Hello world");
console.log("Hello world");
console.log("Hello world");
console.log("Hello world");
console.log("Hello world");returnnewPromise((resolve, reject)=>{// 第二次网络请求setTimeout(()=>{resolve();},1000);});}).then(()=>{// 第二次处理的代码
console.log("hello vue");
console.log("hello vue");
console.log("hello vue");
console.log("hello vue");
console.log("hello vue");returnnewPromise((resolve, reject)=>{// 第三次网络请求setTimeout(()=>{resolve();});});}).then(()=>{setTimeout(()=>{// 第三次处理的代码
console.log("Hello python");
console.log("Hello python");
console.log("Hello python");
console.log("Hello python");
console.log("Hello python");});});</script>说明：
1.第一次网络请求完之后 .then执行第一次的处理结果
2.然后返回第二次的网络请求.then执行第二次的处理结果
…
4.promise的链式编程二
<script>//网络请求：aaa -> 自己处理（10行）//处理：aaa111 -> 自己处理（10行）//处理：aaa111222 -> 自己处理newPromise((resolve, reject)=>{setTimeout(()=>{resolve("aaa");},1000);}).then((res)=>{//1.自己处理
console.log(res,"第一层的10行处理代码");//2.对结果进行第一次处理return Promise.resolve(res+"111");// return Promise.reject('err message');//throw 'err message'}).then((res)=>{
console.log(res,"跌二层的10行处理");return Promise.resolve(res+"222");}).then((res)=>{
console.log(res,"第三层的10行代码处理");}).catch(err=>{
console.log(err);})</script>输出结果
aaa 第一层的10行处理代码
aaa111 跌二层的10行处理
aaa111222 第三层的10行代码处理5.promise的all方法使用
<script>
Promise.all([newPromise((resolve,reject)=>{setTimeout(()=>{// resolve('results1')resolve({nam2:'zhangsan',age:19,sex:'男'})},2000)}),newPromise((resolve,reject)=>{setTimeout(()=>{// resolve('results2')resolve({nam2:'feng',age:16,sex:'男'})},1000)})]).then(results=>{
console.log(results);})</script>说明：
1.俩个promise都执行成功才执行results