JS Promise 之 Hello World

JS Promise 之 Hello World
目录

■前言

0.Axios

axios常用语法

1.ECMAScript 6 （简称 ES6）

2.ECMAScript

■JS的组成（ECMAScript，DOM，BOM）

组成简介

BOM对象

对象【DOM，BOM】的从属关系：

区别【DOM，BOM】：

■Promise （ES6 Promise ）

1.Promise的作用

2.Promise的构造

3.什么是Promise （Promise是一个函数）

4.Hello World代码以及运行效果

代码

运行效果

5.关于【代码】以及【执行效果】的解释

6，async 函数返回一个 Promise 对象

7.更多复杂使用（比如链式操作的用法等等）以及详细说明

8.async、await基础用法

9.async和await与promise的区别

■前言

最近学习VUE，涉及到了一些内容，都不了解，比如 Axios， Promise，所以，整理记录一下

仅仅是一个【简单】的介绍，更多的内容，可以看看提供的文章链接，或是其他的资料。

0.Axios

Axios，可以理解为ajax i/o system，这不是一种新技术，本质上还是对原生XMLHttpRequest的封装，可用于浏览器和nodejs的HTTP客户端，只不过它是基于Promise的，符合最新的ES规范

axios详解_普通网友的博客-CSDN博客_axios

更多关于Axios的资料：

axios--》axios初步操作_亦世凡华、的博客-CSDN博客

axios常用语法

axios(config)：通用/最本质的发任意类型请求的方式

axios(url[,config])：可以只指定url发get请求

axios.request(config)：等同于axios(config)

axios.get(url[,config])：发get请求

axios.delete(url[,config])：发delete请求

axios.post(url[,data,config])：发post请求

axios.put(url[,data.config])：发put请求

axios.defaults.xxx：请求的默认全局配置

axios.interceptors.request.use()：添加请求拦截器

axios.intercetors.response.use()：添加响应拦截器

axios.create([config])：创建一个新的axios(它没有下面的功能)

axios.Cancel()：用于创建取消请求的错误对象

axios.CancelToken()：用于创建取消请求的token对象

axios.isCancel()：是否是一个取消请求的错误

axios.all(promise)：用于批量执行多个异步请求

1.ECMAScript 6 （简称 ES6）

ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。也就是说，ES6就是ES2015

它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

Promise是ES6的新特性之一

ES2015简介和基本语法 - panchanggui - 博客园 (cnblogs.com)

2.ECMAScript

ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会，European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，所以它可以理解为是JavaScript的一个标准

■JS的组成（ECMAScript，DOM，BOM）

BOM和DOM详解 - 牧棋 - 博客园 (cnblogs.com)

组成简介

javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异。

1. ECMAScript （文章上面已经介绍了）

2. DOM 是 W3C 的标准； [所有浏览器公共遵守的标准]
3. BOM 是各个浏览器厂商根据 DOM：在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]

BOM对象

1. Window对象
2. History对象
3. Navigator对象
4. Location对象
5. Document对象

BOM是操作浏览器的，比如下面代码，可以直接跳转到百度画面（直接改变浏览器地址栏中的信息）
```
window.location = www.baidu.com
```
对象【DOM，BOM】的从属关系：

DOM包含：window

Window对象包含属性：document、location、navigator、screen、history、frames

Document根节点包含子节点：forms、location、anchors、images、links

从window.document已然可以看出，DOM的最根本的对象是BOM的window对象的子对象。

Window对象

　　└ location、navigator、screen、history、frames　。。。

　　└ document

　　　　└ forms、location、anchors、images、links　。。。

Javascript中DOM，window对象,history对象，location对象，document对象，内置对象_絵飛ヾ的魚的博客-CSDN博客

区别【DOM，BOM】：

DOM描述了处理网页内容的方法和接口，BOM描述了与浏览器进行交互的方法和接口。

===

■Promise （ES6 Promise ）

1.Promise的作用

主要用于异步通信

Promise有三种状态：Pending（进行中）、Resolved（已完成）、Rejected（已失败）。

只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。

(promise 英 [ˈprɒmɪs] n. 许诺；希望，指望)

2.Promise的构造
```
<html>
<head>
	<meta charset="UTF-8">
	<title>Promise Study</title>
	<script type="text/javascript">
                         console.dir(Promise)
                </script>
</head>
<body>
	<div id="app">
		Promise Study
	</div>
</body>
</html>
```
===

上面代码底6行，在控制台，输出了 Promise的构造

3.什么是Promise （Promise是一个函数）

大白话讲解Promise（一）_aigenglong0649的博客-CSDN博客

Promise的构造函数接收一个参数，是函数，并且传入两个参数：resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。其实这里用“成功”和“失败”来描述并不准确，按照标准来讲，resolve是将Promise的状态置为fullfiled，reject是将Promise的状态置为rejected。

var p = new Promise(function(resolve,  reject) {
  // 。。。
   if ( /* 异步操（成功）作执行完成 */ ) {
    resolve(value);
  } else {
    reject(error);
  }
});

4.Hello World代码以及运行效果

代码
```
<html>
<head>
	<meta charset="UTF-8">
	<title>Promise Study</title>
	<script type="text/javascript">
                         console.dir(Promise)
 
                         function runAsync(){
                              console.log('页面加载');
                              console.log('调用异步操作处理。。。');
                              var p = new Promise(function(resolve, reject){
                                     // 做一些异步操作
                                     setTimeout(function(){
                                         console.log('异步操作执行完成');
                                         resolve('Hello World');
                                  }, 3000);
                             });
                            return p;            
                        }
 
                      runAsync().then(function(data){
                             console.log(data);
                            // 后面可以用传过来的数据做些其他操作
                            // ......
                     });
 
                </script>
</head>
<body>
	<div id="app">
		Promise Study
	</div>
</body>
</html>
```
运行效果

刷新页面后，

首先显示上面代码 9， 10行内容，和异步调用无关
```
页面加载
调用异步操作处理。。。
```
然后，会执行异步操作（处理），以及异步操作（处理）之后的代码。

（使用，setTimeout 函数，模拟异步调用）

代码中【22行】的函数中的参数 data，是【15行】resolve(XXX) 中设定的XXX值。

5.关于【代码】以及【执行效果】的解释
```
              function runAsync(){
                              console.log('页面加载');
                              console.log('调用异步操作处理。。。');
 
                              var p = new Promise(function(resolve, reject){
                                     // 做一些异步操作
                                     setTimeout(function(){
                                         console.log('异步操作执行完成');
                                         resolve('Hello World');
                                  }, 3000);
                             });
 
                            return p;            
               }
 
 
 
 
                runAsync().then(function(data){
                             console.log(data);
                            // 后面可以用传过来的数据做些其他操作
                            // ......
                });
```
【代码】解释

执行 runAsync() 这个函数我们得到了一个Promise对象。

从构造来看，我们知道，Promise对象上有then、catch等方法，

在runAsync()的返回上直接调用then方法，then接收一个参数，是函数，并且会拿到我们在runAsync中调用resolve时传的的参数。

【执行效果】解释

then里面的函数就跟我们平时的回调函数一个意思，能够在runAsync这个异步任务执行完成之后被执行。

这就是Promise的作用了，简单来讲，就是能把原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数。

【then的参数：可以是1个，也可以是2个】

概述
then 方法接收两个函数作为参数，第一个参数是 Promise 执行成功时的回调，第二个参数是 Promise 执行失败时的回调，两个函数只会有一个被调用。

6，async 函数返回一个 Promise 对象

async function runAsync() {

throw new Error('处理失败！');

}

runAsync().then(

data => console.log(data),

err => console.log(err) // Error: '处理失败！

)

Promise中then的两个参数与catch的介绍_py_boy的博客-CSDN博客_promisethen的参数ll

【连续调用（链式写法）】

then 方法返回的是一个新的 Promise 实例（注意，不是原来那个 Promise 实例）。因此可以采用链式写法，即 then 方法后面再调用另一个 then方法。
```
promise.then(res => {
 
        console.log('原来Promise的res', res);
        return 'aaaaa'
    }).then(res => {
        console.log('新的Promise的then里面的res', res);
        return 'bbbbbb'
    }).then(res => {
        console.log('链式调用', res);
    }).then(res => {
        console.log('没有返回值拿到的res:', res);
    })
```
===

7.更多复杂使用（比如 链式操作的用法等等）以及详细说明

大白话讲解Promise（一）_aigenglong0649的博客-CSDN博客

===

es6学习笔记5--promise - huansky - 博客园

===

8.async、await基础用法

1、async和await使得异步请求操作变得 “同步化”，其使得异步和同步一样直接返回一个结果，返回的成功失败，数据的获取直接从保存结果的变量中去判断以及取结果

2、async和await一般成对出现，任何一个离开了，另外一个都活不下去

3、async和await的使用，是基于promise，并且async返回的也是一个promise对象

===
```
timeout(ms){
    return new Promise(resolve=>{
      setTimeout(resolve, ms)
    })
  }
 
  async asyncPrint(){
    await this.timeout(123)
    console.log(11)
  }
```
===

9.async和await与promise的区别

===

async和await与promise的区别_屈小康的博客-CSDN博客_async await

==

===

==

===
相关阅读:
触觉智能分享-SSD20X Ubuntu 20.04 文件系统的移植
 LeetCode 134 加油站
 【安全边界】
回收站里面的东西删除了怎么恢复?
Spring声明式基于注解的缓存（2-实践篇）
docker-compose
PPT文件设置打开密码的两种方法
 PHP比较漏洞, 代码审计, 字符串数字, “0e“字符串, 布尔值比较, 极限值, switch比较, in_array比较
 关于xlrd.biffh.XLRDError: Excel xlsx file； not supported的解决方法
 如何在idea中创建一个SpringBoot项目（超详细教学）
原文地址：https://blog.csdn.net/sxzlc/article/details/127540929

■前言

0.Axios

axios常用语法

1.ECMAScript 6 （简称 ES6）

2.ECMAScript

■JS的组成 （ECMAScript，DOM，BOM）

组成简介

BOM对象

对象【DOM，BOM】的从属关系：

区别【DOM，BOM】：

■Promise （ES6 Promise ）

1.Promise的作用

2.Promise的构造

3.什么是Promise （Promise是一个函数）

4.Hello World代码以及运行效果

代码

运行效果

5.关于【代码】以及【执行效果】的解释

6，async 函数返回一个 Promise 对象

7.更多复杂使用（比如 链式操作的用法等等） 以及 详细说明

8.async、await基础用法

9.async和await与promise的区别

■JS的组成（ECMAScript，DOM，BOM）

7.更多复杂使用（比如链式操作的用法等等）以及详细说明