Promise？小程序目录结构？

ES6 Promise 对象

概述

是异步编程的一种解决方案。

如何使用？

1.主要用于异步计算

2.可以将异步操作队列化，按照期望的顺序进行，返回符合预期结果

3.可以在对象之间传递操作promise，帮助我们处理对列化

使用场景：promise封装api接口、Promise进行异步操作

解决问题：1.回调地域问题2.多个并发请求

在工作中的应用：传统回调模式、promise模式

名词约定

一般来讲，有以下的名词约定：

• promise（首字母小写）对象指的是“Promise实例对象”
• Promise首字母大写且单数形式，表示“Promise构造函数”
• Promises首字母大写且复数形式，用于指代“Promises规范”

什么是Promise？

• Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。
• 从语法上说，promise 是一个对象，从它可以获取异步操作的的最终状态（成功或失败）。
• Promise是一个构造函数，对外提供统一的 API，自己身上有all、reject、resolve等方法，原型上有then、catch等方法。

Promise的两个特点

1、Promise对象的状态不受外界影响

• 1）pending【待定】初始状态

• 2）fulfilled【实现】操作成功状态

• 3）rejected【被否决】操作失败状

  Promise 有以上三种状态，只有异步操作的结果可以决定当前是哪一种状态，其他任何操作都无法改变这个状态即 resolved（已定型）。

2、Promise的状态一旦改变，就不会再变，任何时候都可以得到这个结果，状态不可以逆，只能由 pending变成fulfilled或者由pending变成rejected，成功回调fulfilled，失败回调rejected，then（接受成功数据） catch（接受失败数据）。

使用 new 来创建一个promise对象

Promise接受一个「函数」作为参数，该函数的两个参数分别是resolve和reject。这两个函数就是就是「回调函数」。

resolve函数的作用：将promise从未完成变为完成，在异步操作成功时调用，并将异步操作的结果，作为参数传递出去。

reject函数的作用：将promise状态从未完成变为完成，在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

const promise = new Promise((resolve, reject) => {
    // do something here ...
    if (success) {
        resolve(value); // fulfilled
    } else {
        reject(error); // rejected
    }
});

Promise的API

then()方法

then 方法就是把原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数。

而 Promise 的优势就在于这个链式调用。我们可以在 then 方法中继续写 Promise 对象并返回，然后继续调用 then 来进行回调操作。

可有两个参数，第一个是成功 resolve 调用的方法，第二个是失败 reject 调用的方法
下面做一个买笔写作业上交的演示，它们是层层依赖的关系，下一步的的操作需要使用上一部操作的结果。（这里使用 setTimeout 模拟异步操作），正式开发可以用 ajax 异步

Promise构造函数的超能力

Promises写法的本质就是把异步写法写成同步写法。传入Promise构造函数的函数参数会第一优先执行，无论这个函数多么的繁复，有多少层回调，有多少秒的计数器，统统都会最优先执行。
也就是说，我们只要new了一个Promise()，那么Promise构造函数的函数参数其实是同步代码，但是.then比较特殊，.then会等到promise对象实例有了结果（resolved或者rejected），.then()里面代码才会执行。链条上的每一个.then都会等前面的promise有了结果才会执行，Promise构造函数的这个超能力是Promises系统的威力之源。

reject()方法：

上面样例我们通过 resolve 方法把 Promise 的状态置为完成态（Resolved），这时 then 方法就能捕捉到变化，并执行“成功”情况的回调。
而 reject 方法就是把 Promise 的状态置为已失败（Rejected），这时 then 方法执行“失败”情况的回调（then 方法的第二参数）

catch()方法：

1. 它可以和 then 的第二个参数一样，用来指定 reject 的回调
2. 它的另一个作用是，当执行 resolve 的回调（也就是上面 then 中的第一个参数）时，如果抛出异常了（代码出错了），那么也不会报错卡死 js，而是会进到这个 catch 方法中。

all()方法：

Promise 的 all 方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。

比如下面代码，两个个异步操作是并行执行的，等到它们都执行完后才会进到 then 里面。同时 all 会把所有异步操作的结果放进一个数组中传给 then。

race()方法：

race 按字面解释，就是赛跑的意思。race 的用法与 all 一样，只不过 all 是等所有异步操作都执行完毕后才执行 then 回调。而 race 的话只要有一个异步操作执行完毕，就立刻执行 then 回调。

注意：其它没有执行完毕的异步操作仍然会继续执行，而不是停止。

这里我们将上面样例的 all 改成 race

race 使用场景很多。比如我们可以用 race 给某个异步请求设置超时时间，并且在超时后执行相应的操作。

then 方法

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

then 方法的特点

在 JavaScript 事件队列的当前运行完成之前，回调函数永远不会被调用。

const p = new Promise(function(resolve,reject){
  resolve('success');
});
 
p.then(function(value){
  console.log(value);
});
 
console.log('first');
// first
// success

通过.then 形式添加的回调函数，不论什么时候，都会被调用。

通过多次调用.then，可以添加多个回调函数，它们会按照插入顺序并且独立运行。

const p = new Promise(function(resolve,reject){
  resolve(1);
}).then(function(value){ // 第一个then // 1
  console.log(value);
  return value * 2;
}).then(function(value){ // 第二个then // 2
  console.log(value);
}).then(function(value){ // 第三个then // undefined
  console.log(value);
  return Promise.resolve('resolve'); 
}).then(function(value){ // 第四个then // resolve
  console.log(value);
  return Promise.reject('reject'); 
}).then(function(value){ // 第五个then //reject:reject
  console.log('resolve:' + value);
}, function(err) {
  console.log('reject:' + err);
});

then 方法将返回一个 resolved 或 rejected 状态的 Promise 对象用于链式调用，且 Promise 对象的值就是这个返回值。

then 方法注意点

简便的 Promise 链式编程最好保持扁平化，不要嵌套 Promise。

注意总是返回或终止 Promise 链。

const p1 = new Promise(function(resolve,reject){
  resolve(1);
}).then(function(result) {
  p2(result).then(newResult => p3(newResult));
}).then(() => p4());

创建新 Promise 但忘记返回它时，对应链条被打破，导致 p4 会与 p2 和 p3 同时进行。

大多数浏览器中不能终止的 Promise 链里的 rejection，建议后面都跟上.catch(error => console.log(error));

使用promise进行封装

1、promise对axios进行二次封装

axios本身就是使用promise封装的http库，为什么还要对它进行二次封装呢？在一个项目中我们肯定要使用很多接口，每个接口主要是.get()或者.post()请求，所以我们就要自己手动封装一个全局的Axios网络模块，这样的话就既方便也会使代码量不那么冗余。

• 步骤1.给axios设置请求拦截，响应拦截。
• 步骤2.使用promise封装get(),post()请求。
• 步骤3：在组件中引入封装好的get,post

2、promise封装ajax

Ajax创建步骤

• 创建XMLHttpRequest对象。
• open()方法创建一个新的HTTP请求，并指定该HTTP请求的方法、URL及验证信息。
• onreadystatechange()方法设置响应HTTP请求状态变化的函数。
• send()添加请求参数，发送HTTP请求。
• 获取异步调用返回的数据。
• 使用JavaScript和DOM实现局部刷新。

var url = '/请求的路径';
var params = {
    id: 'id=123',
    limit: 'limit=10'
};

// 封装一个get请求的方法
function getJSON(url) {
    return new Promise(function (resolve, reject) {
        var XHR = XMLHttpRequest ? new XMLHttpRequest() : new window.ActiveXObject('Microsoft.XMLHTTP');

        XHR.onreadystatechange = function () {
            //readyState属性表示请求/响应过程的当前活动阶段。
            if (XHR.readyState == 4) {
                if ((XHR.status >= 200 && XHR.status < 300) || XHR.status == 304) {
                    try {
                        //获取数据
                        var response = JSON.parse(XHR.responseText);
                        resolve(response);
                    } catch (e) {
                        reject(e);
                    }
                } else {
                    reject(new Error("Request was unsuccessful: " + XHR.statusText));
                }
            }
        }
        XHR.open('GET', url + '?' + params.join('&'), true);
        XHR.send(null);
    })
}

getJSON(url).then(resp => console.log(resp));

readyState
0 - 代表未初始化。 还没有调用 open 方法
1 - 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
2 - 代表已加载完毕。send 已被调用。请求已经开始
3 - 代表正在与服务器交互中。服务器正在解析响应内容
4 - 代表完成。响应发送完毕

3、promise封装wx.request

4、promise封装uni.reqest

小程序目录结构