vue Promise的使用
一、Promise是什么？
Promise是异步编程的一种解决方案。
二、那什么时候我们会来处理异步事件呢？
1、 一种很常见的场景应该就是网络请求了。
我们封装一个网络请求的函数，因为不能立即拿到结果，所以不能像简单的3+4=7一样将结果返回。所以往往我们会传入另外一个函数，在数据请求成功时，将数据通过传入的函数回调出去。如果只是一个简单的网络请求，那么这种方案不会给我们带来很大的麻烦。
三、基本使用
01-Promise的基本使用.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <script>
// 什么情况下会用到Promise?
// 一般情况下是有异步操作时,使用Promise对这个异步操作进行封装
// new -> 构造函数(1.保存了一些状态信息 2.执行传入的函数)
// 在执行传入的回调函数时, 会传入两个参数, resolve, reject.本身又是函数
new Promise((resolve, reject) => {
setTimeout(() => {
// 成功的时候调用resolve
// resolve('Hello World')
// 失败的时候调用reject
reject('error message')
}, 1000)
}).then((data) => {
// 1.100行的处理代码
console.log(data);
}).catch((err) => {
console.log(err);
})
</script>
</body>
</html>
02-Promise的另外处理形式.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <script>
new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello Vuejs')
//reject('error message')
}, 1000)
}).then(data => {
console.log(data);
}, err => {
console.log(err);
})
</script>
</body>
</html>
四、链式调用
03-Promise的链式调用.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 参数 -> 函数(resolve, reject)
// resolve, reject本身它们又是函数
// 链式编程
new Promise((resolve, reject) => {
// 第一次网络请求的代码
setTimeout(() => {
resolve("hello")
}, 1000)
}).then(data => {
// 第一次拿到结果的处理代码
console.log(data);
return data + '1111';
}).then(data => { // 第二次处理的代码
console.log(data);
return data + '2222'
}).then(data => {
// 第三处理的代码
console.log(data); })
</script>
</body>
</html>
推荐一个适合零基础学习SQL的网站：不用安装数据库，在线轻松学习SQL！
vue Promise的使用的更多相关文章
- Vue:Promise概要
1.Promise中then是异步的 2.Promise 的then里面两个回调,默认第一个resolve,第二个reject:不会进入catch:如果只有一个回调则进入catch var p1=ne ...
- Vue iview Tree组件实现文件目录-基础实现
注册页面路由 router/router.js { path: 'folder_tree', name: 'folderTree', component: () => import('@/vie ...
- Vue2开发大全
参考资料: vuex element qs.js axios.js vue promise 关于ES6的Promise的使用深入理解 vue2 设置网页title的问题 Mint UI websto ...
- 一些自己常用的cdn
1.vue <script src="http://cdn.bootcss.com/vue/1.0.28-csp/vue.js"></script> < ...
- 简述前后端项目RSA+AES加解密
一.登录机制 在项目中,我们可以大致得出一个登录的过程,主要分为 登录验证.登录保持.退出三个部分.登录验证是指客户端提供用户名和密码,向服务器提出登录请求,服务器判断客户端是否可以登录并向客户端确 ...
- 速查列表：Apache SkyWalking OAL 的 域（Scopes）
OAL简介 在流模式(Streaming mode)下,SkyWalking 提供了 观测分析语言(Observability Analysis Language,OAL) 来分析流入的数据. OAL ...
- Vue : Expected the Promise rejection reason to be an Error
在vue项目中添加ESLint,new 一个 Promise 一直显示错误 :Expected the Promise rejection reason to be an Error 正常来说new ...
- vue 坑之 vuex requires a Promise polyfill in this browser
android内嵌H5页面不显示出现这个问题,原因有很多 首先,别急,请看下面的推荐方案: 1.找个Android真机测试下(机型版本为4.4以上),真机联调测试 Android 只需要四个步骤: 1 ...
- vue结合Promise及async实现高效开发。
在vue中平时的开发中我们应该都会遇到promise函数,比如我们常用的axios,resource这都是用来做http请求的插件. 在平时的开发里,关于axios我们可能是这样写的 import a ...
- vue中promise的使用
vue中promise的使用 promise是处理异步的利器,在之前的文章<ES6之promise>中,我详细介绍了promise的使用, 在文章<js动画实现&&回 ...
随机推荐
- [GDOIpj221C] 流水线
第三题 流水线 提交文件: line.cpp 输入文件: line.in 输出文件: line.out 时间空间限制: 2 秒, 256 MB 在计算机组成原理这门课中,小明的老师布置了实现 CPU ...
- 将多个txt文件中的内容写在一个txt中的方法
import os filename='./train_data/img_' for i in range(1,19736): newfile=filename+str(i)+'.txt' if os ...
- 2023-12-23：用go语言，一支n个士兵的军队正在趁夜色逃亡，途中遇到一条湍急的大河 敌军在T的时长后到达河面，没到过对岸的士兵都会被消灭 现在军队只找到了1只小船，这船最多能同时坐上2个士兵。
2023-12-23:用go语言,一支n个士兵的军队正在趁夜色逃亡,途中遇到一条湍急的大河 敌军在T的时长后到达河面,没到过对岸的士兵都会被消灭 现在军队只找到了1只小船,这船最多能同时坐上2个士兵. ...
- C# 多线程 progressbar 界面不卡顿简单用法
多线程进度条的简单使用,界面不卡顿.如下图: 简单源码如下: using System; using System.Collections.Generic; using System.Componen ...
- 七天.NET 8操作SQLite入门到实战 - 第七天BootstrapBlazor UI组件库引入（1）
前言 由于第七天Blazor前端页面编写和接口对接的内容比较的多,所以这一章节将会分为三篇文章来进行讲解,大家可以认为分为早.中.晚来进行阶段性学习,从而提高学习效率. 七天.NET 8 操作 SQL ...
- 快速批量升级 NugetPackage 版本
批量升级项目中的 Nuget 有时候我们需要升级整个解决方案中的某些Nuget版本,如果每个手动使用NuGet Package Manager 会很麻烦.经过一个周末的踩坑,我找到一个解决方案. Na ...
- 16、Flutter Wrap组件 实现流布局
Wrap可以实现流布局,单行的Wrap跟Row表现几乎一致,单列的Wrap则跟Column表现几乎一致.但 Row与Column都是单行单列的,Wrap则突破了这个限制,mainAxis上空间不足时, ...
- Java 将PDF转为OFD
OFD格式一种国产文件格式,在一些对文档格式有着严格的企业中用得比较多.下面,通过Java程序展示如何将PDF文件转为OFD格式. 代码思路:加载PDF源文档,调用Spire.Pdf.jar提供的sa ...
- 面试官问我：线程锁导致的kafka客户端超时，如何解决？
本文分享自华为云社区<线程锁导致的kafka客户端超时问题>,作者: 张俭 . 问题背景 有一个环境的kafka client发送数据有部分超时,拓扑图也非常简单 定位历程 我们先对客户端 ...
- 案例解读华为隐私计算产品TICS如何实现城市跨部门数据隐私计算
摘要:本文介绍华为可信智能计算服务TICs是如何助力城市跨部门数据实现隐私计算的. 本文分享自华为云社区<基于华为隐私计算产品TICS实现城市跨部门数据隐私计算,助力实现普惠金融>,作者: ...