ES6--Promise--promise-ajax应用，promise-ajax函数封装

最新推荐文章于 2022-05-29 16:03:27 发布

米卡小米

最新推荐文章于 2022-05-29 16:03:27 发布

阅读量663

点赞数

分类专栏： ES6 文章标签： javascript 前端 es6

本文链接：https://blog.csdn.net/cmy741741/article/details/121355418

版权

ES6 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1.promise

Promise 是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。

实例化

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。

它们是两个函数，由 JavaScript 引擎提供。

Promise对象代表一个异步操作有三种状态： pending（进行中）、fulfilled（已成功）和rejected（已失败）。

状态发生改变之后就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）

const promise = new Promise(function(resolve, reject) {
// ... some code
if (/* 异步操作成功 */){
resolve(value); // pending -> fulfilled
} else {
reject(error); // pending -> rejected
}
});

实例方法

      定义在Promise.prototype中的方法，通过Promise实例可以直接调用
Promise.prototype.then()
     当状态由pending变为fulfilled的时候执行该回调函数，
     参数：回调函数，回调函数的参数为resolve函数传递过来的值
     返回值：返回一个新的Promise实例对象，因此可以使用链式调用
Promise.prototype.catch()
     当状态由pending变为rejected的时候执行该回调函数
     参数：回调函数，回调函数的参数为reject函数传递过来的值
     返回值：返回一个新的Promise实例对象，因此可以使用链式调用
Promise.prototype.finally()
    当状态由pending变为fulfilled或者rejected的时候都执行该回调函数，
    参数：回调函数
    返回值：返回一个新的Promise实例对象

const promise = new Promise(function (resolve, reject) {
  if (1 > 0) {
    resolve('success') // promise状态 pending => fulfilled
  } else {
    reject('error') // promise状态 pending => rejected
  }
})

// .then 后面跟上.catch 这种写法，叫链式调用
// 都是promise来调用的
// promise状态变为fulfilled时，执行.then
// promise状态变为rejected时，执行.catch
// resolve函数对应成功的回调 => .then()内部的回调
// reject函数对应失败的回调 => .catch()函数内部的回调
promise.then((res) => {
  // 成功的回调，拿到resolve('suceess')的传递过来的实参
  console.log(res);
}).catch((error) => {
  // 失败的回调，拿到reject('error')的传递过来的实参
  console.log(error);
})

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>promise-ajax</title>
  <script src="./js/jquery.js"></script>
  <script>
    const baseURL = 'http://47.94.46.113:8888';
    const promise = new Promise((resolve, reject) => {
      // 异步请求
      $.ajax({
        url: baseURL + '/index/category/findAlll',
        method: 'get',
        success(res) {
          // 异步请求成功，将成功结果作为实参传递到resolve回调中去
          resolve(res);
        },
        error(error) {
          // 异步请求失败，将失败结果作为实参传递到reject回调中去
          reject(error);
        }
      })
    })
    // 监听promise实例状态的改变
    promise.then((res) => {
      console.table(res.data);
    }).catch((error) => {
      console.error(error);
    }).finally(() => {
      console.log('最终执行');
    })
  </script>
</head>

<body>

</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>promise工厂函数</title>
  <script src="./js/jquery.js"></script>
  <script>
    const baseURL = 'http://47.94.46.113:8888';

    function getPeomise(url, method) {
      return new Promise((resolve, reject) => {
        $.ajax({
          url: baseURL + url,
          method,
          success(res) {
            resolve(res);
          },
          error(error) {
            reject(error);
          }
        })
      })
    }

    let pro1 = getPeomise('/index/category/findAll', 'get');
    let pro2 = getPeomise('/index/article/findHotArticles', 'get');

    // 静态方法
    // let newPro = Promise.any([pro1, pro2]);

    // newPro.then(res => {
    //   console.log(res);
    // }).catch(error => {
    //   console.log(error);
    // })

    // 访问pro1这个promise实例内部的状态
    // pro1.then(res => {
    //   console.table(res.data);
    // }).catch(error => {
    //   console.error(error);
    // })

    // pro2.then(res => {
    //   console.table(res.data);
    // }).catch(error => {
    //   console.error(error);
    // })

    let obj = {
      name: '张三',
      age: 12
    }
    let proObj = Promise.reject(obj);
    console.log(proObj);
  </script>
</head>

<body>

</body>

</html>

静态方法

          定义在Promise中的方法，通过Promise可以直接调用
Promise.all([p1,p2])
    用于将多个 Promise 实例，包装成一个新的 Promise 实例，
    参数：数组，数组中的元素为Promise实例
    返回值：Promise实例,当p1,p2状态都为fulfilled时候，该实例的状态才为fulfilled，此时p1，p2的返回值组成一个数组，传递给该实例的回调函数；只要p1，p2的返回值有一个变为rejected，该实例状态为rejected
Promise.race([p1,p2])
     用于将多个 Promise 实例，包装成一个新的 Promise 实例，
    参数：数组，数组中的元素为Promise实例
    返回值：Promise实例,当p1,p2之中有一个实例率先改变状态，该实例的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给该实例的回调函数。