Promise常用方法

tech2025-01-07 7

Promise-nesting

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../utils.js"></script> </head> <body> <button onclick="sendMsg()">发送请求</button> <script> // 发送三个不同的请求，根据三个返回做数据据处理 // 按顺序发请求 // 把嵌套promise展开，在第一个then里把promise return出来就可以在后面.then了而不用在里面嵌套了 function sendMsg () { utils.fetch('./06.php', { id: prompt() }).then(resp => { console.log(resp) // 第一个请求返回了才发第二个 return utils.fetch('./06.php', { id: prompt() }) }).then(resp1 => { console.log(resp1) return utils.fetch('./06.php', { id: prompt() }) }).then(resp2 => { console.log(resp2) }).catch(() => { console.log('只要由任意一个promise走了reject，这里就会执行') }) } </script> </body> </html>

Promise.all && Promise.race

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../utils.js"></script> </head> <body> <button onclick="sendMsg()">发送请求</button> <script> // 发送三个不同的请求，根据三个返回做数据据处理 // 同时发送三个 function sendMsg () { var pro1 = utils.fetch('./06.php', { id: prompt() }) var pro2 = utils.fetch('./06.php', { id: prompt() }) var pro3 = utils.fetch('./06.php', { id: prompt() }) // Promise.all([ pro1, pro2, pro3 ]).then((values) => { // console.log('这三个promise都resolve了才会执行这个then') // // values是一个数组，分别就放了三个promise在resolve的时候传过来的参数 // console.log(values) // }) Promise.race([ pro1, pro2, pro3 ]).then((value) => { console.log('三个promise有任意一个resolve了就会执行这个then，后面的就不管了') // value就是第一个resolve的promise传过来的参数 console.log(value) }) } </script> </body> </html>

嵌套Promise展开

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="utils.js"></script> </head> <body> <button onclick="sendMsg()">发送请求</button> <script> // 发送三个不同的请求，根据三个返回做数据据处理 // 按顺序发请求 // 把嵌套promise展开，在第一个then里把promise return出来就可以在后面.then了而不用在里面嵌套了 function sendMsg() { utils.fetch('06.php', { id: prompt() }).then(resp => { console.log(resp); return utils.fetch('06.php', { id: prompt() }) }).then(resp => { console.log(resp); return utils.fetch('06.php', { id: prompt() }).then(resp => { console.log(resp); }) }).catch(() => { console.log('只要有任意一个promise走了reject，这里就会执行'); }) } </script>

最后总结个Promise的get和post的请求方法已封装好，用于utils.js

* 基于promise的ajax get请求 * @param {string} url 请求地址 * @param {object} query 请求要携带的参数 * @param {boolean} isJson 响应数据是否时json格式，默认为true fetch(url, query, isJson = true) { //定义函数fetch if (query) { //判断是否有参数传入 url += '?' //地址信息拼接 for (var key in query) { //把参数遍历出来进行拼接 url += `${key}=${query[key]}&` //参数拼接 } url = url.slice(0, -1) //去掉多余的拼接符号 } // 把这个promise的实例return出去，才能在调用位置.then return new Promise((resolve, reject) => { //重新定义一个promise，并且把值返回 var xhr = new XMLHttpRequest() //定义一个XMLHttpRequest()对象 xhr.open('get', url) //信息的获取方式 xhr.send() //信息传输 xhr.onreadystatechange = function() { //监视事件是否完成 if (xhr.readyState === 4) { //当当前文档的状态为4，也就是文档完成 if (xhr.status === 200) { //浏览器正常读取 var data = isJson ? JSON.parse(xhr.responseText) : xhr.responseText //判断是否为json语言 resolve(data) //承诺完成，输出data } else { reject() //承诺失败 } } } }) }, /** * ajax post请求 * @param {string} url 请求地址 * @param {object} query 请求要携带的参数 * @param {boolean} isJson 响应数据是否为json格式，默认为true */ fetchpost(url, query, isJson = true) { var str = '' if (query) { for (var key in query) { str += `&${key}=${query[key]}` } } return new Promise((resolve, reject) => { var xhr = new XMLHttpRequest() xhr.open('POST', url) //设置请求头，发送的数据类型为urlencoded xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') xhr.send(str) xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { var data = isJson ? JSON.parse(xhr.responseText) : xhr.responseText resolve(data) } else { reject() } } } }) }

最新回复(0)