Vue学习25_Vue的异步操作Promise
2024-05-15 11:11:43
Vue的异步操作Promise
- Promise的基本使用：当我们需要执行异步操作时，传统的异步操作代码看起来十分的混乱，多次回调，给人一种灾难般的感受，我们称这种情况为回调地狱，为了解决这一问题，Vue为我们提供了异步操作的一种形式，Promise
示例代码：每隔三秒打印不同的内容
<script>// 使用setTimeoutsetTimeout(() => {console.log("Hello world");}, 5000)// 使用promise// promise(参数：函数(参数：resolve，reject))// 本身又是函数new Promise((resolve, reject) => {resolve()}).then(() => {setTimeout(() => {console.log("Hello world")console.log("Hello world")console.log("Hello world")console.log("Hello world")console.log("Hello world")console.log("Hello world")}, 3000)return new Promise((resolve, reject) => {resolve()}).then(() => {setTimeout(() => {console.log("Hello zyt")console.log("Hello zyt")console.log("Hello zyt")console.log("Hello zyt")console.log("Hello zyt")console.log("Hello zyt")}, 6000)return new Promise((resolve, reject) => {resolve()}).then(() => {setTimeout(() => {console.log("Hello ltn")console.log("Hello ltn")console.log("Hello ltn")console.log("Hello ltn")console.log("Hello ltn")console.log("Hello ltn")}, 9000)})})})// 当使用到异步操作时，一般会用到Promise进行封装// Promise对网络请求的代码进行了分类new Promise((resolve, reject) => {// 在这里执行网络请求setTimeout(() => {// 执行resolve将请求到的数据data传递到then中执行// 处理成功，跳转到thenresolve("张大宝")// 处理失败，跳转到catchreject("刘小宝")}, 3000)}).then((data) => {// 在这里对网络请求的数据进行操作console.log(data);console.log(data);console.log(data);console.log(data);console.log(data);}).catch((erro) => {console.log(erro);})</script>
运行结果：
- Promise的另外处理形式：resolve当请求执行成功时调用，执行then函数，reject当请求调用失败时调用，可执行错误处理
示例代码：
<script>new Promise((resolve, reject) => {setTimeout(() => {// resolve("Hello world")reject("error message")}, 5000)}).then((data) => {console.log(data);}, (error) => {console.log(error);})</script>
运行结果：
3. Promise的链式调用：当我们需要执行异步请求时，请求的次数有多次，则在使用Promise时，可以提高代码的可读性，在代码风格上看起来，仿佛时一条长长的链子，因此称为Promise的链式调用；
示例代码：请求获取到一个数据a，以此调用将a后面拼接上他后面的字母，如ab，并且传给下一次请求接着调用：
<script>// 获取数据a，自己处理完再接着传递给下一个函数拼上b，在拼上cnew Promise((resolve) => {setTimeout(() => {resolve('a')}, 2000)}).then((res) => {// 自己处理自己的数据console.log('自己处理数据', res);// 对第一次结果进行处理,并且赋值给下一次处理thenreturn new Promise((resolve) => {resolve(res + 'b')})}).then((res) => {console.log('自己处理数据', res);// 对第二次结果进行处理return new Promise((resolve) => {resolve(res + 'c')})}).then((res) => {console.log('自己处理数据', res);return new Promise((resolve) => {resolve(res + 'd')})}).then((res) => {console.log('自己处理数据', res);return new Promise((resolve) => {resolve(res + 'e')})}).then((res) => {console.log('自己处理数据', res);})setTimeout(() => {console.log('-------------------------');}, 2000)</script>
运行结果：
上述代码看起来还是有点复杂，我们想着，是否能够对上述代码进行简写：
Promise的简写：这里去掉了每一次新的请求都需要新new一个Promise，直接return Promise对象并且调用它的resolve方法即可：，运行结果
//Promise的简写new Promise((resolve) => {setTimeout(() => {resolve('a')}, 4000)}).then((res) => {// 自己处理自己的数据console.log('自己处理数据', res);// 对第一次结果进行处理,并且赋值给下一次处理thenreturn Promise.resolve(res + 'b')}).then((res) => {console.log('自己处理数据', res);// 对第二次结果进行处理return Promise.resolve(res + 'c')}).then((res) => {console.log('自己处理数据', res);return Promise.resolve(res + 'd')}).then((res) => {console.log('自己处理数据', res);return Promise.resolve(res + 'e')}).then((res) => {console.log('自己处理数据', res);})setTimeout(() => {console.log('-------------------------');}, 4000)
运行结果：
Promise更简洁的写法：直接return一个结果，不需要调用Promise
// Promise更简洁写法new Promise((resolve) => {setTimeout(() => {resolve('a')}, 6000)}).then((res) => {// 自己处理自己的数据console.log('自己处理数据', res);// 对第一次结果进行处理,并且赋值给下一次处理thenreturn res + 'b'}).then((res) => {console.log('自己处理数据', res);// 对第二次结果进行处理return res + 'c'}).then((res) => {console.log('自己处理数据', res);return res + 'd'}).then((res) => {console.log('自己处理数据', res);return res + 'e'}).then((res) => {console.log('自己处理数据', res);})setTimeout(() => {console.log('================================');}, 6000)
运行结果：
- Promise处理失败结果：
示例代码：
// Promise处理失败new Promise((resolve) => {setTimeout(() => {resolve('a')}, 6000)}).then((res) => {// 自己处理自己的数据console.log('自己处理数据', res);// 对第一次结果进行处理,并且赋值给下一次处理then// return Promise.reject('error message')throw 'error message'}).then((res) => {console.log('自己处理数据', res);// 对第二次结果进行处理return res + 'c'}).then((res) => {console.log('自己处理数据', res);return res + 'd'}).then((res) => {console.log('自己处理数据', res);return res + 'e'}).then((res) => {console.log('自己处理数据', res);}).catch((err) => {console.log(err);})
运行结果：
5. Promise的all方法：当所有异步操作执行完成后，将执行的结果保存到一个数组内：
示例代码：
<script>// Promise.all([// new Promise((resolve, reject) => {// $ajax({// url: 'url1',// success: function (data) {// resolve(data)// }// })// }),// new Promise((resolve, reject) => {// $ajax({// url: 'url2',// success: function (data) {// resolve(data)// }// })// }),// ]).then((results) => {// console.log(results[0]); //保存url1的结果// console.log(results[1]);//保存url2的结果// })Promise.all([new Promise((resolve, reject) => {setTimeout(() => {resolve({name: 'zyt',age: 21,heigth: 1.8})}, 2000)}),new Promise((resolve, reject) => {setTimeout(() => {resolve({name: 'ltn',age: 22,heigth: 1.6})}, 1000)}),]).then((results) => {console.log(results);})</script>
运行结果：
Vue学习25_Vue的异步操作Promise相关推荐
- Vue 学习第八天
Vue 学习第八天 1. 了解了回掉函数的使用,了解了文件的读取, 2.Promise 函数讲解 console.dir(Promise) //Promise 函数讲解 //1.其是一个构造函数,既 ...
- Vue学习笔记（三） —— 前后端交互
简介 本文主要是为了介绍前端交互的相关知识,而严格来讲,这也不算是Vue的专属知识,但是却是必须要指定的.本文开始简单说了ajax.jquery 的方式,但是随着SPA开发模式的大火,相继出现了一些新 ...
- 【Vue学习笔记】尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通
尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通 1.Vue核心部分 1.1 Vue简介 1.1.1 Vue是什么? Vue是一套用于构建用户界面的渐进式JavaScript框架. ...
- Vue学习之认识到应用（三）
上一篇文章Vue学习之认识到应用(二)因为字太多页面反应不过来,卡了.重新写了一部分,难受. 目录 13.Vue-Router前端路由 13.1.路由的发展阶段 13.1.1.后端路由阶段 13.1. ...
- Vue学习（vuex）-学习笔记
文章目录 Vue学习(vuex)-学习笔记 含义理解 具体代码 辅助函数 mapGetters mapActions Vue学习(vuex)-学习笔记 含义理解 State Vuex 使用单一状态树- ...
- Vue学习（slot、axios）-学习笔记
文章目录 Vue学习(slot.axios)-学习笔记 slot 插槽 axios 交互 Vue学习(slot.axios)-学习笔记 slot 插槽 父: <template> < ...
- Vue学习笔记（五）—— 状态管理Vuex
介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试 ...
- ES6学习（八）—Promise对象 超鸡重要
ES6学习(八)-Promise对象,超鸡重要 必须要会 Promise对象:代表了未来某个将要发生的事情(通常是一个异步操作) 有了Promise对象,可以将异步操作以同步的流程表达出来,避免了层层 ...
- day 83 Vue学习之五DIY脚手架、webpack使用、vue-cli的使用、element-ui
Vue学习之五DIY脚手架.webpack使用.vue-cli的使用.element-ui 本节目录 一 vue获取原生DOM的方式 二 DIY脚手架 三 vue-cli脚手架的使用 四 webpac ...
最新文章
- 腾讯！阿里！大二男生斩获4家头部科技公司实习offer！完整经验总结！
- Google 出品的 Java 编码规范，权威又科学，强烈推荐
- pandas生成新的累积连乘数据列（cumprod）、pandas生成新的累积连乘cumprod数据列（数据列中包含NaN的情况）、pandas计算整个dataframe的所有数据列的累积连乘
- 装机、做系统必备：秒懂MBR和GPT分区表____转载网络
- springmvc教程--RESTful支持详解
- 关于Faster R-CNN的一切——笔记3：Faster R-CNN
- python处理字符串效率_Python字符串搜索效率
- matlab转换成vc,如何将matlab65函数转换成vc++60动态链接库.doc
- Php的定界符有哪些了,php中定界符
- 对于我今后人生受益匪浅的几句话
- python x y 定位点击,python - Python找到一个点相对于其他四个已知点的x，y位置 - 堆栈内存溢出...
- xcode cocos2dx 3.x mac工程 当assert(cond)触发断点，但cond却为0
- LeetCode（463）——岛屿的周长（JavaScript）
- C# Invoke 和 BeginInvoke的区别和共同点
- 《WINDOWS游戏编程之从零开始》第四章学习笔记
- The NMEA 0183 Protocol
- sqlite和MySQL一些常用命令_sqlite3常用命令语法
- PLC和变频器通讯方式
- dota5显示正在连接协调服务器,win10系统打开dota2提示已连接至DOTA2游戏协调服务器正在登陆中如何解决...
- 服务器系统https打不开网页,记录一次解决网站突然无法打开处理HTTP被封的问题...