大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新......
- github:https://github.com/Daotin/Web
- 微信公众号:Web前端之巅
- 博客园:
一、Promise
Promise是一个对象,代表了未来某个将要发生的事件(,这个事件通常是一个异步操作)
有了Promise对象, 可以将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数(俗称'回调地狱')。
ES6的Promise是一个构造函数, 用来生成promise实例。
1、promise对象3个状态
pending: 初始化状态fullfilled: 成功状态rejected: 失败状态2、使用方法
1、创建一个promise实例对象,参数是一个匿名函数,这个匿名函数有两个参数,resolve和reject,
2、每一个参数都是一个回调函数。然后,函数体中一般执行的是异步操作,比如发起Ajax请求,或者开启定时器等。
3、异步操作成功时,调用resolve回调函数,异步操作失败时,调用reject回调函数。
4、在初始化Promise实例对象的时候,Promise的状态为pending;在调用resolve回调函数的时候,Promise的状态为fullfilled,表示成功状态;在调用reject回调函数的时候,Promise的状态为rejected,表示失败状态;
5、 Promise的实例对象有一个方法then,参数为两个匿名函数,第一个匿名函数处理Promise的状态为fullfilled的情况;第二个匿名函数处理Promise的状态为rejected的情况;
6、上面说到,在异步操作成功或者失败的时候,会调用resolve和reject函数,在这两个回调函数中可以传入参数,这个参数可以直接带入到then中两个匿名函数的参数中使用。比如获取到ajax的数据,可以将获取的数作为参数传入resolve的参数中,然后会自动将这个参数传入then的第一个匿名函数中,reject也一样。
用图示的方法表示:
示例:
let promise = new Promise((resolve, reject) => { console.log(111); // 执行异步操作 setTimeout(() => { console.log(222); // 执行异步操作成功,此时修改promise的状态fullfilled resolve("success!"); // 执行异步操作成功,此时修改promise的状态rejected reject("failed!"); }, 2000); }); promise.then((data) => { // promise的状态fullfilled的操作 console.log("成功", data); }, () => { // promise的状态rejected的操作 console.log("失败", data); });注意:当执行到resolve("success!");修改promise的状态fullfilled的时候,后面的reject("failed!");不会执行。也就不会打印console.log("失败");的语句。
promise案例:获取新闻内容和评论内容
// 定义一个请求news的方法 function getNews(url) { //创建一个promise对象 let promise = new Promise((resolve, reject) => { //初始化promise状态为pending //启动异步任务,发起Ajax请求 //1.创建一个 XMLHttpRequest 类型的对象 let request = new XMLHttpRequest(); // 4. 指定 xhr 状态变化事件处理函数 request.onreadystatechange = function () { if (request.readyState === 4) { if (request.status === 200) { let news = request.response; resolve(news); } else { reject('请求失败了...'); } } }; request.responseType = 'json'; //设置返回的数据类型 // 2. 打开与一个网址之间的连接 request.open("GET", url); //规定请求的方法,创建链接 // 3. 通过链接发送一次请求 request.send(); //发送 }) // 只有将promise返回,才可以调用then方法


