异步处理-Promise解决回调地狱

系列文章目录

---

---

前言

高山仰止，景行行止。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、Promise是什么？

ES6中一个非常重要和好用的特性就是Promise
Promise是异步编程的一种解决方案。
那什么时候我们会来处理异步事件呢?
一种很常见的场景应该就是网络请求了。
我们封装一个网络请求的函数，因为不能立即拿到结果，所以不能像简单的3+4=7一样将结果返回。
所以往往我们会传入另外一个函数，在数据请求成功时，将数据通过传入的函数回调出去。
如果只是一个简单的网络请求，那么这种方案不会给我们带来很大的麻烦。
但是，当网络请求非常复杂时，就会出现回调地狱。(多层嵌套,像深度递归)

注意！！Promise的返回值必须调用.then()才能获取[[PromiseResult]]的值

二、如何避免回调地狱?

2.1Promise基本语法

代码如下:(视频理解)

// 参数-->函数(resolve,reject)
// resolve,reject本身又是函数
// 链式编程
new Promise((resolve,reject) => {
  //异步操作封装于Promise
  setTimeout(() => {
    resolve();//调用resolve,就会自动调用下面的then()函数
  },1000)
}).then(() => {
  //第一次模拟发送网络请求的代码
  console.log("hello world!");
  console.log("hello world!");
  console.log("hello world!");
  console.log("hello world!");

  return new Promise((resolve, reject) =>{
    setTimeout (() => {
      resolve()
    },1000)
  })
}).then( () => {
  //第二次模拟发送网络请求的代码
  console.log("hello vuejs");
  console.log("hello vuejs");
  console.log("hello vuejs");
  console.log("hello vuejs");

  return new Promise( (resolve, reject) => {
    setTimeout( () => {
      resolve()
    },1000)
  })
}).then( () => {
  //第三次模拟发送网络请求的代码
  console.log("hello python");
  console.log("hello python");
  console.log("hello python");
  console.log("hello python");
})

2.2Promise的三种状态.

首先,当我们开发中有异步操作时,就可以给异步操作包装一个Promise
异步操作之后会有三种状态我们一起来看一下这三种状态:
pending :等待状态，比如正在进行网络请求，或者定时器没有到时间。
fulfill:满足状态,当我们主动回调了resolve时，就处于该状态，并且会回调.then()
reject:拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch()

2.2.1 状态运行代码示例

new Promise((resolve, reject) => {
  setTimeout( () => {
    // 成功时调用resolve -> then
    // 失败时调用reject -> catch
    reject('error message')
  },1000)
}).then((data) => {
  console.log("Hello World!");
}).catch((err) => {
  console.log(err);
})

2.2.2Promise的链式调用

链式一:

// 参数-->函数(resolve,reject)
// resolve,reject本身又是函数
// 链式编程
new Promise((resolve,reject) => {
  //异步操作封装于Promise
  setTimeout(() => {
    resolve();//调用resolve,就会自动调用下面的then()函数
  },1000)
}).then(() => {
  //第一次模拟发送网络请求的代码
  console.log("hello world!");
  console.log("hello world!");
  console.log("hello world!");
  console.log("hello world!");

  return new Promise((resolve, reject) =>{
    setTimeout (() => {
      resolve()
    },1000)
  })
}).then( () => {
  //第二次模拟发送网络请求的代码
  console.log("hello vuejs");
  console.log("hello vuejs");
  console.log("hello vuejs");
  console.log("hello vuejs");

  return new Promise( (resolve, reject) => {
    setTimeout( () => {
      resolve()
    },1000)
  })
}).then( () => {
  //第三次模拟发送网络请求的代码
  console.log("hello python");
  console.log("hello python");
  console.log("hello python");
  console.log("hello python");
})

3.Promise的all方法使用

视频讲解传送门

下方使用ajax模拟 多请求

//参数->可迭代对象
//all会等待两个请求完毕.
Promise.all([
    new Promise( (resolve, reject) => {
      $.ajax({
        url: 'url1',
        success: function (data) {
          resolve(data)
        }
      })
    }),
    new Promise( (resolve, reject) => {
      $.ajax({
        url: 'url2',
        success: function (data) {
          resolve(data)
        }
      })
    })
]).then( results => {
  results[0]//返回保存的第一个请求
  results[1]//返回保存的第二个请求
})

注意！！Promise的返回值必须调用.then()才能获取[[PromiseResult]]的值

---

三.总结

对于勇士来说，贫并困窘、责难、诽谤、冷嘲热讽……，一切压迫都是前进的动力。