<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script type="text/javascript"> /** * Promise对象 * 1. 理解: * Promise对象; 代表了未来某个将要发生的事件(通常是一个异步操作) * 有了Promise对象,可以将异步操作以同步的流程表达出来,避免了层层嵌套的回调函数(俗称'回调地狱') * ES6的Promise是一个构造函数,用来生成Promise实例 * 2. 使用Promise的基本步骤(2步) */ // 1: 创建Promise对象 /* let promise = new Promise((resolve, reject) => { // 初始化Promise状态为pending // 2:执行异步操作 // ajax xxx query // 如果执行成功 if(true){ resolve('执行成功') //修改Promise的转台为fullfilled }else{ reject('执行失败') // 修改Promise的转台为rejected } }) */ // 2: 调用Promise的then() /* then 第一个函数是成功返回的时候执行 第二个函数是失败返回的时候执行 catch 异常的时候执行 promise.then(res => { console.log(res) },err => { console.log(err) }).catch(err => { console.log(err) }) */ /** * promise 对象的三种状态 * pending: 初始化状态 * fullfilled: 成功状态 * rejected: 失败状态 */ /** * 应用: * 使用Promise实现超时处理 * * 使用Promise封装处理Ajax请求 */ /* let request = new XMLHttpRequest() reject.onreadystatechange = function(){} request.responseType = 'json' request.open('GET', 'http://www.baidu.com') request.send() */ // 上面的代码 不可以执行 只做参考 let promise = new Promise((resolve, reject) => { // 使用定时器模拟异步操作 setTimeout(() => { console.log("send ajax!") let flag = true; if (flag) { resolve("执行成功!") } else { reject("执行失败") } }, 1000) }) promise.then(res => { console.log('第一个函数:',res) },err => { console.log('第二个函数:',err) }).catch(error => { console.log("服务器开小差了!") }) </script> </html>
作者：彼岸舞
时间：2021 816
内容关于：前端知识库
本文属于作者原创,未经允许,禁止转发