回调地狱与promise

<script src="js/ajax.js"></script><script>// function fn(a){//     a()// }// fn(function(){})// let arr = ['a', 'b']// arr.sort(function(){})// setTimeout(function(){//     console.log('第一次执行')//     setTimeout(function(){//         console.log('第二次')//         setTimeout(function(){//             console.log('第三次')//         }, 1000)//     }, 1000)// }, 1000)/*比如我们发送三个 ajax 请求- 第一个正常发送- 第二个请求需要第一个请求的结果中的某一个值作为参数- 第三个请求需要第二个请求的结果中的某一个值作为参数*/ajax_get({url: 'data/a.php',success(res){console.log(res)console.log('第一次的结果')ajax_get({url: 'data/b.php',query: {a: res},success(res){console.log(res)console.log('第二次的结果')ajax_get({url: 'data/c.php',query: { b: res },success(res){console.log(res)console.log('第三次的结果')}})}})}})//事件为什么是异步执行？不会阻塞其他代码执行

//resolve 成功的回调，承诺兑现//reject 失败的回调，承诺没有兑现//Promise只是一个'小工具'，为了解决回调地狱存在，本身没有其他的功能// let p = new Promise((resolve, reject)=>{//     //resolve()//     reject()// })//console.log(p.__proto__)//链式调用，链式写法//成功时执行的回调函数// p.then(()=>{//     console.log('成功了')// //失败时执行的回调函数// }).catch(()=>{//     console.log('失败了')// //无论成功还是失败都会执行的回调函数// }).finally(()=>{//     console.log('成功或者失败都会执行')// })//需求：用户承诺2秒后输入一个大于10的数字？// function fn(){//     return new Promise((resolve, reject)=>{//         setTimeout(()=>{//             let num = prompt('请输入一个数字?')//             if(num>10){//                 resolve()//             }else{//                 reject()//             }//         }, 2000)//     })// }// fn().then(()=>{//     console.log('恭喜你喜提冰墩墩！')// }).catch(()=>{//     console.log('已经被抢完了!')// })

链式写法
function Person(name){this.name = namethis.say = function(){console.log(this.name + '喜欢经常骚扰小姐姐')//console.log(this)//this.say()return this}this.rg = function(){console.log(this.name + '喜欢晚上去公园里面的小树林')}}let p = new Person('冯建炜')p.say().rg()this返回成函数本身再调用

promise封装ajax
/*ajax_get封装+ url地址+ query查询字符串+ success成功回调函数+ error失败回调函数*/function pAjax(options) {return new Promise((resolve, reject)=>{let xhr = new XMLHttpRequest()//判断地址不能为空if (!options.url) {alert('地址不能为空')return}//查询字符串处理if (options.query) {let str = '?'for (let key in options.query) {str += `${key}=${options.query[key]}`str += '&'}str = str.slice(0, -1)//请求参数xhr.open('get', options.url + str)} else {xhr.open('get', options.url)}//发送请求xhr.send()//监听请求状态xhr.onreadystatechange = () => {if (xhr.readyState == 4) {if (xhr.status == 200) {resolve(xhr.response)} else {reject()}}}})}pAjax({url: 'data/a.php'}).then((res)=>{console.log(res)})</script>

<script src="js/ajax.js"></script><script>/*ajax_get({url: 'data/a.php',success(res){console.log(res)console.log('第一次的结果')ajax_get({url: 'data/b.php',query: {a: res},success(res){console.log(res)console.log('第二次的结果')ajax_get({url: 'data/c.php',query: { b: res },success(res){console.log(res)console.log('第三次的结果')}})}})}})*///Promise最大的好处是让咱们把异步的代码可以写成同步形式，本质上不变（异步）pAjax({url: 'data/a.php'}).then((res)=>{console.log(res)console.log('第一次的结果')return pAjax({url: 'data/b.php', query: {a: res}})}).then((res)=>{console.log(res)console.log('第二次的结果')return pAjax({ url: 'data/c.php', query: { b: res } })}).then((res)=>{console.log(res)console.log('第三次的结果')})</script>

回调地狱与promise相关推荐

【JavaScript】回调地狱、Promise
文章目录 1. 回调函数 2. 异步任务 3. 回调地狱 4. Promise 4.1 Promise定义 4.2 Promise基础用法 4.2.1 生成Promise实例 4.2.2 Promis ...
详解回调地狱以及promise
1.什么是回调地狱? 说promise之前必须先简单说下,回调地狱回调地狱:在回调函数中又嵌套了多层回调函数,便会形成回调地狱 JS中或node中,都大量的使用了回调函数进行异步操作,而异步操作什么 ...
ES6（三）——回调地狱和promise异步任务顺序执行（传参、错误处理）
文章目录方法一.回调函数(回调地狱) 方法二:promise 2.1异步任务传参(单个) 2.2异步任务传参(多个) 2.3 错误处理 2.4 Promiss对象三大状态: (学名) 2.5 Pro ...
回调地狱终结者——Promise
在Web前端开发中,我们使用JavaScript会大量依赖异步计算.比如说,Ajax请求时,我们可能会需要不只一个请求来达到某种目的,此时需要后面的请求依赖于前面请求的结果.这种情况在简单的业务中并无 ...
回调地狱和Promise
目录 1.回调地狱callback-hell 由于fs.readFile是异步操作,所以你不能判断下面三个文件的执行顺序 var fs = require('fs')fs.readFile('./da ...
什么是回调地狱以及promise的链式调用和aysnc/await
上面一篇博客写到了回调地域的问题,这篇博客将深究这个词语,如下例: doSomething(function(result){doSomethingElse(result, function(newR ...
【Callback Hell】一文让你轻松了解何为回调地狱?
回调地狱[Callback Hell] 前提知识点: 单线程和异步: JS是单线程语言,只能同时做一件事儿 (例子:做一个ajax请求去加载资源,或者说弄一个定时器,先等待1秒钟后干嘛,如果按照单线程 ...
一文告诉你什么是回调地狱，如何解决回调地狱？
文章目录前言一.回调地狱是什么? 二.如何解决回调地狱 1.Promise 2.async/await 总结前言在正式了解"回调地狱"之前,我们先了解两个概念: 回调函数 ...
使用ES6的Promise完美解决回调地狱
相信经常使用ajax的前端小伙伴,都会遇到这样的困境:一个接口的参数会需要使用另一个接口获取. 年轻的前端可能会用同步去解决(笑~),因为我也这么干过,但是极度影响性能和用户体验. 正常的前端会把接口 ...

回调地狱与promise

回调地狱与promise相关推荐

最新文章

热门文章