Observable和Promise

二者的区别

• promise解决了嵌套地狱的问题；
  单纯使用ajax，如果需要同步操作，那么我们只能进行函数嵌套，要是嵌套的多了，会头疼的。
• 建立promise时立即执行操作，一旦执行，无法被取消；
  promise控制的操作会在实例化promise的时候立刻执行，而且无法中断。
• 可使用async,await让多个promise进行同步；
• promise只可以被执行一次，重复调用，promise内部直接返回之前的状态。
• promise一定是异步的，即使内部操作是即使是同步的，依旧会异步执行。

---

• Observable解决了promise只有一个结果，和不可以取消的问题。
• 在Observable被订阅时，开始执行操作。
  要使用徒步操作，需先使用toPromise()变成Promise对象才可以。
• 重复执行一个Observable，结果是一致的，内部操作被重复执行。
• Observable会根据内部操作去判别使用异步还是同步。

Observable

介绍 Observable 之前，我们要先了解两个设计模式：（会的可以直接跳过）

Observer Pattern ——（观察者模式） 去学习观察者模式

Iterator Pattern ——（迭代器模式）

这两个模式是 Observable 的基础，

Promise

Promise对象代表一个异步操作，有三种状态：
pending（进行中）
fulfilled（已成功）
rejected（已失败）
只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

• 生成一个Promise对象。

const promise = new Promise(function(resolve, reject) {
// ... some code

if (/* 异步操作成功 */){
  resolve(value);
} else {
  reject(error);
}
});

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。

• resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为
  resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去给then的第一个函数参数回调。

• reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为
  rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去给给then的第二个函数参数回调。

• 当代码出现错误的时候，promise将会调用catch回调函数

promise.then(function(value) {
  // value将resolve(value)提供的值接收
}, function(error) {
  // error将reject(value)提供的值接收
}).catch(function(error) {
  // promise运行时发生的错误
  console.log('发生错误！', error);
})

=========================================================================

以下是我自己做给自己的随笔，想认真学的，建议去看阮一峰老师写的。链接在这里
https://es6.ruanyifeng.com/#docs/promise

function promiseTest(){
    function timeout(ms) {
     return new Promise((resolve, reject) => {
                //失败执行，实际调用then下的失败函数,参数作为失败函数的输入，
                //不过比起该函回调then，还是使用catch捕获异常比较合适，因为promise的catch具有冒泡性质，会把异常抛给下一个promise，而reject只捕获当前promise
                //跟传统的try/catch代码块不同的是，如果没有使用catch方法指定错误处理的回调函数，Promise 对象抛出的错误不会传递到外层代码，即不会有任何反应。
                    reject(new Error('Could not load image at '+ms))
                // 成功执行，实际调用then下的成功函数,参数作为成功函数的输入
                    resolve(new Error('Could not load image at '+ms))
                    ms=ms+1000
                //resolve或reject之后的代码会被继续执行。resolve本质是传递参数并异步调用外部then中设置的函数，
                    console.log(ms);
            });
    }

    let s=timeout(5000)
     //注意then会返回一个新的对象，并将其包装成promise。
    s.then(function su(value) {
        console.log(1+value);
    },function fail(value){
        console.log(value);
    })
    //注意catch会返回一个新的Promise
    .catch(e => console.log(e));

//primise状态传递实现异步的栅栏效果。
    function syncTest(){
        const p1 = new Promise(function (resolve, reject) {
            setTimeout(() => reject(new Error('fail')), 3000)
            })
        const p2 = new Promise(function (resolve, reject) {
            setTimeout(() => resolve(p1), 1000)
            })
        p2.then(result => console.log(result))
            .catch(error => console.log(error))
                }

    
    //实现异步的栅栏效果。只接受一个由promise组成的迭代数据。
    //primise.all()  只有参数全部为返回fulfilled，或者有一个被rejected，会将参数返回值合并数组 然后返回一个新的Promise。
    //Promise.race() 只要参数之中只要有一个发生了状态转变，并使用发生转变参数的回调Promise
    //Promise.allSettled() 只有参数中全部返回结果，才能合并返回值并返回一个新的Promise
    function syncTest(){
        const p1 = new Promise((resolve, reject) => {
        resolve('hello 1');
        })

        const p2 = new Promise((resolve, reject) => {
        resolve('hello 2');
        })

        Promise.all([p1, p2])
        .then(result => console.log(result))
        .catch(e => console.log(e));
    }
}

多个Promise同步

• async的属于Generator的包装，自动使用了next 迭代器。
• 注意await后面必须是一个Promise对象或者thenable对象才能同步.,不然直接返回该对象
• await后面的Promise对象返回的reject参数会被async的catch捕捉，而不是执行then的第二个参数
• 如果await的一个Promise对象失败或者返回reject，那么整个async程序都会终止，除非使用try…catch捕捉。
• async函数内部return语句返回的值，会成为async函数返回Promise对象then方法回调函数的参数。
• async程序调用的时候，会返回一个Promise参数。

function asyncTest(){
    //注意函数属于值传递，调用时回先执行参数表达式，所以setTimeout的函数式参数不能使用(),不然立即执行。
 //实现同步
    function timeout(ms,msg) {
        return new Promise((resolve) => {
            setTimeout(resolve, ms);
        });
    }

    async function asyncPrint(value, ms) {
        console.log(value);
        const symbol1=  await timeout(ms,"这是第一个");
        console.log(symbol1);
        const symbol2 = await timeout(ms,"这是第二个");
        console.log(symbol2);


        }

    let a=asyncPrint('hello world', 1000)
    console.log(a.name)

 //实现栅栏效果
    async function asyncBarrier(value, ms) {
        //写法一
       // let [foo, bar] = await Promise.all([timeout(5000), timeout(5000)]);
        // 写法二
        let fooPromise1 = timeout(5000);
        let barPromise2 = timeout(5000);
        let foo = await fooPromise1;
        let bar = await barPromise2;
        }

    let b=asyncBarrier('hello world', 1000)
    console.log(b.name)

}

将请求包装在Observable中

const getPromise = (method, url, params, isLoading) => {
if (isLoading) {
// 点击事件必加，且防止穿透
wx.showLoading({
title: ‘加载中…’,
mask: true
});
}
let sessionId = wx.getStorageSync(“t”); // 这里吧sessionId叫成了t 即微信唯一标识，根据场景需求可以改成不同的命名方式

  return new Promise((resolve, reject) => {
      wx.request({
        url: server_address + url,
        method: method,
        data: params,
        dataType: 'json',
        header: {
          'content-type': method == 'GET' ? 'application/json' : 'application/x-www-form-urlencoded',
          'Cookie': 't=' + sessionId
        },
        success: (res) => {
          // console.log(res);
          // if (sessionId == "" || sessionId == null) {
          //   wx.getStorageSync("t", res.data.info.sessionId); // 本地没有就说明第一次请求，把返回的sessionId 存入本地
          // }
          let data = res.data;
          if (data.meta.success) {
            resolve(res.data);
          } else {
            wx.showToast({
              title:'服务器奔溃',
              icon: 'none',
              duration: 2000,
              mask: true,
            })
          }
        },
        fail: (err) => {
          wx.showToast({
            title: '服务器奔溃啦~~~',
            icon: 'none',
            duration: 2000,
            mask: true
          })
          reject(err.data)
        },
        complete: () => {
          if (isLoading) {
            wx.hideLoading();
          }
        }
      })
    })
    .catch(res => {
      console.log(res);
      wx.showToast({
        title:'请求失败!',
        icon:'none,
      })
    })
}

将请求包装在Promise中的一个小例子