前端知识之promise

什么是promise？

1. promise 是 ES6 中提供的原生对象
2. promise主要用于异步计算，将异步操作队列化，按照期望的顺序执行以返回符合预期的结果

promise的作用

咱们先了解什么是同步，什么是异步
举个形象的例子：

• 同步就是你叫我去吃饭，我听到了就和你去吃饭；如果没有听到，你就不停的叫，直到我告诉你听到了，才一起去吃饭。
• 异步就是你叫我，然后自己去吃饭，我得到消息后可能立即走，也可能等到下班才去吃饭。
• 还有个简单的例子 打电话是同步 发消息是异步

异步操作的常见语法（ajax）

// 比较常见的有ajax
$.ajax('http://www.wyunfei.com/', {
 success (res) {
   // 这里可以监听res返回的数据做回调逻辑的处理
 }
})

// 或者在页面加载完毕后回调
$(function() {
 // 页面结构加载完成，做回调逻辑处理
})

异步回调的问题：

• 之前处理异步是通过纯粹的回调函数的形式进行处理
• 很容易进入到回调地狱中，剥夺了函数return的能力
• 问题可以解决，但是难以读懂，维护困难

一般情况我们一次性调用API就可以完成请求。
有些情况需要多次调用服务器API，就会形成一个链式调用，比如为了完成一个功能，我们需要调用API1、API2、API3，依次按照顺序进行调用，这个时候就会出现回调地狱的问题

promise

• promise是一个对象，对象和函数的区别就是对象可以保存状态，函数不可以（闭包除外）
• 并未剥夺函数return的能力，因此无需层层传递callback，进行回调获取数据
• 代码风格，容易理解，便于维护
• 多个异步等待合并便于解决

promise创建

var promise = new Promise(function(resolve, reject) {
    // 异步处理
    // 处理结束后、调用resolve 或 reject
});

Promise 构造函数包含一个参数和一个带有 resolve（解析）和 reject（拒绝）两个参数的回调。在回调中执行一些操作（例如异步），如果一切都正常，则调用 resolve，否则调用 reject。

下面是实例

var myFirstPromise = new Promise(function(resolve, reject){
    //当异步代码执行成功时，我们才会调用resolve(...), 当异步代码失败时就会调用reject(...)
    //在本例中，我们使用setTimeout(...)来模拟异步代码，实际编码时可能是XHR请求或是HTML5的一些API方法.
    setTimeout(function(){
        resolve("成功!"); //代码正常执行！
    }, 250);
});
 
myFirstPromise.then(function(successMessage){
    //successMessage的值是上面调用resolve(...)方法传入的值.
    //successMessage参数不一定非要是字符串类型，这里只是举个例子
    document.write("Yay! " + successMessage);
});

对于已经实例化过的 promise 对象可以调用 promise.then() 方法，传递 resolve 和 reject 方法作为回调。

promise.then() 是 promise 最为常用的方法。

promise.then(onFulfilled, onRejected)

promise简化了对error的处理，上面的代码我们也可以这样写：

promise.then(onFulfilled).catch(onRejected)

实例（模拟登录）
已在axios中做拦截（如果返回的code并非200，则返回Promise.reject(‘error’) ）

service.interceptors.response.use(
  response => {
  /**
  * code为非200是抛错 可结合自己业务进行修改
  */
    const res = response.data
    if (res.code !== 200) {
      Message({
        message: res.message,
        type: 'error',
        duration: 3 * 1000
      })
      return Promise.reject('error')
    } else {
      return response.data
    }
  },

 var testPromis = new Promise((resolve, reject) => {
        login(username,password).then(response => {
          const tokenStr = response.data.token
          setToken(tokenStr)          
          resolve()
        }).catch(error => {
          reject(error)
        })
      })

	testPromis.then(() => {
              this.loading = false;
              setCookie("username",this.loginForm.username,15);
              setCookie("password",this.loginForm.password,15);
              this.$router.push({path: '/'})
            }).catch(() => {
              this.loading = false
            })

Promise.prototype.then方法：链式操作
Promise.prototype.then 方法返回的是一个新的 Promise 对象，因此可以采用链式写法。

getJSON("/posts.json").then(function(json) {
  return json.post;
}).then(function(post) {
  // proceed
});

上面的代码使用 then 方法，依次指定了两个回调函数。第一个回调函数完成以后，会将返回结果作为参数，传入第二个回调函数。

如果前一个回调函数返回的是Promise对象，这时后一个回调函数就会等待该Promise对象有了运行结果，才会进一步调用。

getJSON("/post/1.json").then(function(post) {
  return getJSON(post.commentURL);
}).then(function(comments) {
  // 对comments进行处理
});

这种设计使得嵌套的异步操作，可以被很容易得改写，从回调函数的"横向发展"改为"向下发展"。

注明相关内容出处 菜鸟
以下具体方法可直接链接学习

• Promise.prototype.catch方法
• Promise.all方法，Promise.race方法
• Promise.resolve 方法，Promise.reject 方法