一、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的使用的更多相关文章

  1. Vue:Promise概要

    1.Promise中then是异步的 2.Promise 的then里面两个回调,默认第一个resolve,第二个reject:不会进入catch:如果只有一个回调则进入catch var p1=ne ...

  2. Vue iview Tree组件实现文件目录-基础实现

    注册页面路由 router/router.js { path: 'folder_tree', name: 'folderTree', component: () => import('@/vie ...

  3. Vue2开发大全

    参考资料: vuex element qs.js axios.js vue promise 关于ES6的Promise的使用深入理解  vue2 设置网页title的问题 Mint UI websto ...

  4. 一些自己常用的cdn

    1.vue <script src="http://cdn.bootcss.com/vue/1.0.28-csp/vue.js"></script> < ...

  5. 简述前后端项目RSA+AES加解密

    一.登录机制 在项目中,我们可以大致得出一个登录的过程,主要分为  登录验证.登录保持.退出三个部分.登录验证是指客户端提供用户名和密码,向服务器提出登录请求,服务器判断客户端是否可以登录并向客户端确 ...

  6. 速查列表：Apache SkyWalking OAL 的 域（Scopes）

    OAL简介 在流模式(Streaming mode)下,SkyWalking 提供了 观测分析语言(Observability Analysis Language,OAL) 来分析流入的数据. OAL ...

  7. Vue : Expected the Promise rejection reason to be an Error

    在vue项目中添加ESLint,new 一个 Promise 一直显示错误 :Expected the Promise rejection reason to be an Error 正常来说new ...

  8. vue 坑之 vuex requires a Promise polyfill in this browser

    android内嵌H5页面不显示出现这个问题,原因有很多 首先,别急,请看下面的推荐方案: 1.找个Android真机测试下(机型版本为4.4以上),真机联调测试 Android 只需要四个步骤: 1 ...

  9. vue结合Promise及async实现高效开发。

    在vue中平时的开发中我们应该都会遇到promise函数,比如我们常用的axios,resource这都是用来做http请求的插件. 在平时的开发里,关于axios我们可能是这样写的 import a ...

  10. vue中promise的使用

    vue中promise的使用 promise是处理异步的利器,在之前的文章<ES6之promise>中,我详细介绍了promise的使用, 在文章<js动画实现&&回 ...

随机推荐

  1. 小程序引入外部icon图标

    一.使用阿里巴巴图标库引入字体图标 阿里巴巴图标库:https://www.iconfont.cn/manage/index 选择合适的图标 收藏,在收藏中查看 选择:自己的项目 选择:第二个{fon ...

  2. DDD学习与感悟——总是觉得自己在CRUD怎么办？

    一.DDD是什么? DDD全名叫做Domins drives Design:领域驱动设计.再说的通俗一点就是:通过领域建模的方式来实现软件设计. 问题来了:什么是软件设计?为什么要进行软件设计? 软件 ...

  3. LambdaQueryWrapper常用方法

    /***附加条件构造器LambdaQueryWrapper常用方法 ---这几个肯定够用了*/wrapper.eq("实体类::查询字段", "条件值"); / ...

  4. mybatis_高级

    注解方式: 不需要配置文件 @select等注解直接放在接口mapper里 多表操作: @Select("select * from user1") @Results({ @Res ...

  5. 开源地图库OpenLayers的简单使用

    引言 最近在学习可视化的东西,这让我想起了一些以前用过的图表库,其实我在日常做的大多是普通的需求,可视化方面应用的并不多,只是偶尔会因为个别特殊的需求,去借助一些图表库来实现图表的展示,这些普通的图表 ...

  6. 国产 Web 组态软件在玻璃生产线中的应用

    ​  概述 随着工厂信息化.数字化发展,智慧生产车间成为必然发展趋势,通过智能硬件.物联网.大数据等智慧化技术与手段,提高车间生产设备.工艺设备的智能执行能力,从而提升整个车间乃至工厂的智能化.网络化 ...

  7. 反向 Debug 了解一下？揭秘 Java DEBUG 的基本原理

    Debug 的时候,都遇到过手速太快,直接跳过了自己想调试的方法.代码的时候吧-- 一旦跳过,可能就得重新执行一遍,准备数据.重新启动可能几分钟就过去了. 好在IDE 们都很强大,还给你后悔的机会,可 ...

  8. 三维GIS引擎用什么好？结合目前市面上的主流引擎进行分析

    相信大多数人在谈到三维GIS引擎时,第一个想到的首先是CesiumJS,CesiumJS以其免费开源的特点,快速占领了三维GIS这个领域,同时也催生了许多以CesiumJS为基础的衍生产品.Cesiu ...

  9. Charles的奇巧淫技

    大家好,我是 dom 哥.今天讨论一下 Charles 的高级用法. Charles 是 mac 电脑的一个网络代理软件,也是我平时开发常用的一个工具,用过的都说好. 本文不是 Charles 的入门 ...

  10. 【UniApp】-uni-app-打包成小程序

    前言 大家好,我是 BNTang, 在上一节文章中,我给大家详细的介绍了如何将我开发好的项目打包为网页. 趁热打铁,在来一篇文章,给大家详细的介绍如何将项目打包为小程序. 正文 打开微信小程序呢,其实 ...