promise的状态以及api介绍_promise-async/await-axios

Promise对象代表了未来某个将要发生的事件（通常是一个异步操作），是ES6原生提供的。

在ES6以前实现异步操作主要是依靠回调函数，由于ajax请求时无法得知数据返回的具体时间，所以只能将callback回调传给ajax，待ajax请求完成时再执行回调函数。而promise接受一个函数做参数，该函数有 resolve方法和reject方法两个参数，若异步操作成功则用resolve方法将Promise对象的状态变为resolved，若异步操作失败则用reject方法将状态变为rejected。promise实例生成后，可以用then分别制定resolve方法和reject方法的回调函数。这样就能以同步操作的流程来表达异步操作，避免了层层嵌套的回调函数。

异步代码一般使用基于回调的API，尤其在Node.js中，例如：

function 

当回调越来越深后就会难以阅读和维护，成为所谓的“回调地狱”，我们用promise可以以向下发展的形式取代上面这种横向发展的模式：

function 

我们甚至可以用异步函数async来将上述异步代码用同步代码的形式书写（本质上仍是异步执行）：

async 

言归正传，promise有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。Promise对象的状态改变只有两种可能：从pending变为fulfilled或者从pending变为rejected。Promise的基本用法如下：

var 

Promise构造函数接受一个函数做参数，该函数有 resolve方法和reject方法两个参数，若异步操作成功则用resolve方法将Promise对象的状态从pending变为resolved即“进行中”变为“成功”，若异步操作失败则用reject方法将状态从pending变为rejected即“进行中”变为“失败”。Promise实例生成后，可以用then方法分别指定resolve状态和rejected状态的回调函数。then方法可以接受两个回调作为入参，第一个是promise对象的状态变为resolved的时候调用的回调，第二个是promise对象的状态变为rejected时调用的回调（第二个可选）。

let 

上面代码中，Promise新建后立即执行，所以首先输出的是Promise，然后then方法指定回调函数，将在当前脚本所有同步任务执行完成后才会执行，所以resolved最后输出。

下面我们来写一个用Promise对象实现ajax的实例：

var 

代码demo见：一个小实例

在该例子的基础上演示链式调用：https://jsbin.com/pubekuhebi/edit?html,output

getData

上面代码使用then方法一次指定了两个回调函数。第一个回调函数完成后会将返回结果作为参数，传入给第二个回调函数。即return value是传给第二个tnen中的val值。意思就是前一个回调函数返回的是Promise对象，这时后一个回调函数就会等待该Promise对象有了运行结果，才进一步调用。就是说等到天气接口返回数据value后，第一个then里的return value将数据传给第二个 then，第二个then的回调才会开始执行。

在该例子的基础上演示catch方法捕捉错误：https://jsbin.com/mutijesaho/edit?html,console,output (我们故意将接口url写错来试验请求失败的情景)

getData

catch方法是then(null, rejection)的别名，用于指定发生错误时的回调函数。Promise对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止。https://jsbin.com/zotexufovi/edit?html,console,output

https://jsbin.com/zotexufovi/edit?html,console,output

---

Promise.all方法用于将多个异步操作(或Promise对象)包装成一个新的Promise，当这些异步操作都完成后，新的Promise对象状态才会变成fulfilled；只要其中有一个异步操作失败则新的Promise对象的状态就会变成rejected。
Promise.all()方法:成功时按照接收的数据顺序执行（成功多少个就返回多少个）;失败时只返回最先被reject的值(只返回一个值)。成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。
例1:

let 

例2:实现一个倒计时计数功能

var 

Promse.all在处理多个异步处理时非常有用，比如说一个页面上需要等两个或多个ajax的数据回来以后才正常显示，在此之前只显示loading图标。代码模拟：

let 

注意：Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的，即p7的结果在前，即便p7的结果获取的比p8要晚。这带来了一个绝大的好处：在前端开发请求数据的过程中，偶尔会遇到发送多个请求并根据请求顺序获取和使用数据的场景，使用Promise.all毫无疑问可以解决这个问题。

对比一下Promise.race的使用

let 

顾名思义，Promse.race就是赛跑的意思，意思就是说，Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。

---

至于async函数，是用来取代回调函数的另一种方法，只要函数名前加上async关键字，就表明其内部有异步操作。该异步操作应该返回一个前面用await关键字注明的Promise对象。一旦遇到await就先返回它后面的表达式产生的Promise对象，不再执行函数体内后面的语句。等到当前宏任务执行完毕后再来扫尾当前微任务队列中所有微任务，即刚才“函数体内后面的语句”。即await是让出线程的标志，await后面的表达式会先执行一遍再将await后面的代码加入到micro task中然后就跳出整个async函数来执行后续同步代码。

带async关键字的函数仅仅是把 return值包装成Promise对象，其他并无特殊之处。

例子：实现一个倒计时计数功能

// 写法1

---

至于axios，它是基于promise的http库，在我理解实际上就是包括了ajax和promise等的功能的npm包，企业项目中很多都会用axios来调接口发送请求而不是直接手写ajax。

Features

• Make XMLHttpRequests from the browser 从浏览器中创建 XMLHttpRequests
• Make http requests from node.js 从 node.js 创建 http 请求
• Supports the Promise API 支持 Promise API
• Intercept request and response 拦截请求和响应 （就是有interceptor）
• Transform request and response data 转换请求数据和响应数据
• Cancel requests 取消请求
• Automatic transforms for JSON data 自动转换 JSON 数据
• Client side support for protecting against XSRF 客户端支持防御 XSRF
  知否上有一个有趣的讨论，关于有些项目里axios被promise再封装的问题，因为axios支持请求和响应拦截故个人不太理解这个操作的必要：

axios为什么还要promise封装一次​segmentfault.com

---

本文引用参考：

面试问到 Promise，这样回答最完美了​mp.weixin.qq.com

异步函数-提高promise的易用性​developers.google.com 更快的异步函数和promise​v8.js.cn axios是如何实现promise的？​www.zhihu.com

js每隔1秒打印12345​blog.csdn.net ECMAScript 6入门​es6.ruanyifeng.com