二十五、ES6新增语法（promise解决异步回调地狱）ES7（async / await解决异步回调地狱）

最新推荐文章于 2024-01-22 21:55:18 发布
最新推荐文章于 2024-01-22 21:55:18 发布
阅读量517 收藏 1
点赞数 1
文章标签： ajax javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45256247/article/details/107417254
版权

promise !!!

异步回调地狱
在这里插入图片描述
简介
es6出了一个新技术叫promise，主要就是用来解决异步回调地狱的
在这里插入图片描述

语法!!!

// 1. 创建promise对象
const p = new Promise(一个实参 函数类型 有两个形参)     第一个形参代表成功了 success  resolve
												   第二个形参代表失败了  error   reject

const p = new Promise((resolve, reject) => {
	// console.log('代码默认触发 正在进行中' )
    // 写代码 成功了 resolve(数据)    交给then的第一个实参处理  一般放接口返回的数据
    // 写代码 失败了 reject(数据)     交给then的第二个实参处理   一般放错误信息
    							   也可以交给全局处理catch
}) 

// 2. 使用
p
	.then(data => { data就是resolve传递的数据
        
        return 值  // 第一个then返回的值会交给第二个then继续处理
	}, err => {    // err就是reject的传递的参数
        
	})  
	....
	.then(实参1, 实参2)
	.catch(err => {  // then有第二个实参就自己处理，没有就交给全局catch处理
        
	})

练习

目的：验证我们对语法的理解是不是正确的

明确：new Promise实战函数中一般写异步的代码 ajax、定时器

验证：

a. 验证promise实参函数默认会触发
b. 验证成功了会交给then的第一个实参处理
c. 验证失败了会交给then的第二个实参处理
d. 验证第一个then返回的值会交给第二个then处理
e. 验证失败了如果没写then的第二个实参会交给全局的catch处理

接口准备

{
    "meta": {
        "msg": "gun",
        "statu": 200
    },
    "data": null
}

在这里插入图片描述
环境部署好后
a. 验证promise实参函数默认会触发

<meta charset="UTF-8">
<script>
    const p = new Promise((resolve, reject) => { // 回调函数传递进去必定触发 
        console.log('promise默认触发进行中....')
    })
</script>

在这里插入图片描述
b. 验证成功了会交给then的第一个实参处理

<meta charset="UTF-8">
<script>
    const p = new Promise((resolve, reject) => { // 回调函数传递进去必定触发 
        console.log('promise默认触发进行中....')

        // 1. 创建ajax对象
        const xhr = new XMLHttpRequest
            // 2. 监控请求状态
        xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        // 之前：callback处理
                        // 现在：resolve交给then的第一个实参处理
                        resolve(JSON.parse(xhr.responseText))
                    } else {
                        reject(xhr.status)
                    }
                }
            }
            // 3. 设置请求地址、请求方式
            // xhr.open('get', './api.json')
        xhr.open('get', './tishi.json')
            // 4. 发送请求
        xhr.send(null)
    })


    p
        .then(
            res => {
                console.log(1, res)
                    // return undefined
                return res
            },
            err => {
                console.log(2, err)
            }
        )
</script>

在这里插入图片描述
c. 验证失败了会交给then的第二个实参处理

<meta charset="UTF-8">
<script>
    const p = new Promise((resolve, reject) => { // 回调函数传递进去必定触发 
        console.log('promise默认触发进行中....')

        // 1. 创建ajax对象
        const xhr = new XMLHttpRequest
            // 2. 监控请求状态
        xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        // 之前：callback处理
                        // 现在：resolve交给then的第一个实参处理
                        resolve(JSON.parse(xhr.responseText))
                    } else {
                        reject(xhr.status)
                    }
                }
            }
            // 3. 设置请求地址、请求方式
            // xhr.open('get', './api.json')
        xhr.open('get', './jj2.json') //后端接口被修改错误
            // 4. 发送请求
        xhr.send(null)
    })


    p
        .then(
            res => {
                console.log(1, res)
                    // return undefined
                return res
            },
            err => {
                console.log(2, err)
            }
        )
</script>

在这里插入图片描述
d. 验证第一个then返回的值会交给第二个then处理

<meta charset="UTF-8">
<script>
    const p = new Promise((resolve, reject) => { // 回调函数传递进去必定触发 
        console.log('promise默认触发进行中....')

        // 1. 创建ajax对象
        const xhr = new XMLHttpRequest
            // 2. 监控请求状态
        xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        // 之前：callback处理
                        // 现在：resolve交给then的第一个实参处理
                        resolve(JSON.parse(xhr.responseText))
                    } else {
                        reject(xhr.status)
                    }
                }
            }
            // 3. 设置请求地址、请求方式
            // xhr.open('get', './api.json')
        xhr.open('get', './jj.json')
            // 4. 发送请求
        xhr.send(null)
    })


    p
        .then(
            res => {
                console.log(1, res)
                    // return undefined
                return res
            },
            // err => {
            //     console.log(2, err)
            // }
        )
        .then(res => { // res是第一个then实参的返回值  也就是第一个then结果会交给第二个then处理
            console.log(3, res)
        })
</script>

在这里插入图片描述
d.验证失败了如果没写then的第二个实参会交给全局的catch处理

<meta charset="UTF-8">
<script>
    const p = new Promise((resolve, reject) => { // 回调函数传递进去必定触发 
        console.log('promise默认触发进行中....')

        // 1. 创建ajax对象
        const xhr = new XMLHttpRequest
            // 2. 监控请求状态
        xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        // 之前：callback处理
                        // 现在：resolve交给then的第一个实参处理
                        resolve(JSON.parse(xhr.responseText))
                    } else {
                        reject(xhr.status)
                    }
                }
            }
            // 3. 设置请求地址、请求方式
            // xhr.open('get', './api.json')
        xhr.open('get', './jj2.json')//接口路径被改错
            // 4. 发送请求
        xhr.send(null)
    })


    p
        .then(
            res => {
                console.log(1, res)
                    // return undefined
                return res
            },
            // err => {
            //     console.log(2, err)
            // }
        )
        .then(res => { // 
            console.log(3, res)
        })
        .catch(err => {    //then的第二个实参没写会交给全局的catch处理
            console.log(4, err)
        })
</script>

在这里插入图片描述

■ES7中async/await（扩展）!!!

在这里插入图片描述
概念
ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，在2015年6月发布

ES2017 标准引入了 async 函数，使得异步操作变得更加方便（解决promise纵向延伸问题）

语法

async function 函数名() {
	   var data = await Promise 对象
	.....
}

注意1：
await 操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用.
注意2：
es5 异步回调地狱瑕疵（横向延伸太深）
es6 promise解决 （竖向延伸太深）
es7 async&await （异步改为同步 一行一行执行）
注意3：
1-await必须和async同时出现
2-await只能和promise一起使用

练习

<meta charset="UTF-8">
<script>
    /*
    es5 异步回调地狱瑕疵（横）
    es6 promise解决    （竖）
    es7 async&await    （同步  一行一行执行）
    
    语法：
    
    async function 函数名() {
        var data1 = await promise对象
        var data2 = await promise对象
    }
    注意：
    1-await必须和async同时出现
    2-await只能和promise一起使用
    */
    
    function getPromise(method, url) {
        var tmp = new Promise(function(s, e){
            const xhr = new XMLHttpRequest()
            xhr.onreadystatechange = function() {
                // 打开网站请求成功，并且服务器也响应你内容
                if (xhr.readyState == 4) 
                {
                    if(xhr.status == 200) 
                    {
                        s(JSON.parse(xhr.responseText))
                    } else {
                        e(JSON.parse(xhr.responseText))
                    }
                }
            }
            xhr.open(method, url)
            xhr.send(null)
        })
        return tmp
    }
    
    async function fn() {     //将异步请求改为同步，让代码一行一行执行从而解决异步回调地狱问题
        var p1 = await getPromise('get', './jj.json') 
        console.log(111, p1)
        var p2 = await getPromise('get', './jj.json') 
        console.log(222, p2)
    }
    
    // 切记还得调用函数
    fn()
    </script>

执行结果：
在这里插入图片描述

℡想定下来
关注
回调地狱
m0_61700036的博客
01-16 1612
一、回调地狱 在了解回调地狱之前，先了解一下 ‘ 回调函数’和‘ 异步任务 ’ 1、回调函数 回调函数： 当一个函数作为参数传入另一个函数中，并且它不会立即执行，只有当满足一定条件后该函数才可以执行，这种函数就称为回调函数。 function fn(){ console.log('陕西西安') } setTimeout(fn,3000) //fn就是回调函数 2、异步任务 与之相对应的概念是“同步任务”，同步任务在主线程上排队执行，只有前一个任务执行完
详解小程序原生使用ES7 async/await语法
10-18
在`testAsync`方法内部，我们通过`await`关键字等待`testPromise`方法的返回结果，这种方式可以让我们以同步的方式编写异步代码，避免了传统回调地狱的问题。 需要注意的是，虽然通过上述步骤可以实现在小程序中...
ES6 语法之 Promise
杏子
04-08 796
一、概念 Promise是为了解决异步操作的容器，是一个构造函数，通过new关键字生成实例，接收一个成功和一个失败的回调函数作为参数。 const promise = new Promise(function(resolve, reject) { if (/* 异步操作成功 */){ resolve(value);//成功回调函数 } else { reject(...
ES6的新增特性promise对象
qq_38337985的博客
08-24 338
为解决ajax多次请求，并且依赖上一次结果的多次请求造成的代码可读性差，消耗更多的等待时间，以及不容易维护的问题，而新增了特性promise，promise能更合理规范的进行异步处理操作。 （一）基本用法： let pro = new Promise(function(resolve,reject){ //pending状态 if(true){ //fulfilled状态 resolve("操作成功") }else{
解决回调地狱终极方法 - ES7新增 - async 和 await
weixin_49070186的博客
12-15 675
概念： ES7 新增的 专门 配合 promise封装函数一起执行的程序 作用： 让 异步程序 按照顺序 一个一个的执行 说明： promise语法 本质上 异步程序仍然是按照 前端来执行的 只是 promise语法 让 嵌套执行的函数程序通过 回调函数的语法形式 看上去 像 一个一个 按照顺序执行 async 和 await 是 通过 JavaScript定义的程序的执行机制让 多个 异步程序 按照顺序 一个一个执行 语法： 使用 async 作为 关键词 声明定义一个函.
细谈回调地狱终极解决方案及ES7新语法async和await
qq_23539691的博客
05-25 228
1.回调地狱的一般解决方案 正常情况下，我们都知道用promise去解决回调地狱。通过其调用then 和catch方法来实现回调函数多层嵌套问题。但是，我们可以实际来仔细看看用promise解决回调地狱的方法和问题所在。 //假设我们有两个数据库。 area.php传递一个城市的区域。city.php传递城市名。 //我们现在要通过ajax传递参数 promiseAjax({ url:"area.php", data:{ name:"南山区" } }).then(re
async/await与promise（nodejs中的异步操作问题）
10-20
Promise是ES6（ECMAScript 2015）引入的一个用于异步编程的解决方案，其核心是解决回调地狱（callback hell）问题，提高代码的可读性和可维护性。一个Promise对象代表了一个可能尚未完成但预期在未来某个时间完成的...
详解ES6之async+await 同步/异步方案
08-29
async+await是ES6中引入的异步编程解决方案，旨在解决异步编程中的回调地狱问题。下面我们将详细介绍async+await的工作原理和使用方法。 异步编程的几个场景 异步编程是JavaScript编程的重大问题之一。关于异步...
ES7之Async/await的使用详解
10-17
ES6引入的Promise解决了这一问题，而ES7的Async/Await则进一步优化了Promise的使用体验，使得异步代码更接近同步的写法。 首先，我们需要了解Promise。Promise是一个代表未来某个时刻可能完成或失败的操作的对象。...
【翻译】关于回调地狱
weixin_34032792的博客
06-03 122
回调地狱 JavaScript异步程序书写指南 什么是“回调地狱”？ 我们很难一眼就看懂异步JavaScript，或者是使用回调函数的JavaScript程序。例如下面这段代码： fs.readdir(source, function (err, files) { if (err) { console.log('Error f...
Promise 并行和串行理解
漫无目的猿猿的博客
02-19 2577
promise主要是针对异步请求，这里也主要是针对异步请求来展开 并行：多个异步请求同时进行 串行：一个异步请求完了之后在进行下一个请求 首先定义一些promise实例 并行: var promises = function () { return [1000, 2000, 3000].map(current =&gt; { return...
JS-回调地狱
NAIYAnana的博客
05-07 2263
一、什么是回调地狱 前端的ajax和jsonp内部充斥着大量的异步，为了能够拿到异步的数据，使用了大量的回调函数，来获取将来异步执行成功之后的数据。如果请求不多时还好，一旦请求的数量达到一定程度，并且复杂度提升以后，会造成一些问题，这就是回调地狱。 二、回调函数 在发送Ajax中，客户端和服务器之间的请求和响应都是需要时间的，而我们要拿响应回来的数据就必须等响应完成，这些都是回调函数的常用场景。 let fs = require('fs'); // 【异步函数读取】 // 读取a文件 fs.
回调地狱是什么？
doiido的专栏
07-31 636
为了解决回调地狱问题，可以使用一些技术手段，如Promise、async/await等。Promise可以将回调函数的嵌套改为链式调用，提高代码的可读性。在回调地狱中，当一个异步任务完成时，会触发一个回调函数，而这个回调函数可能又会触发下一个异步任务，并且这种嵌套的结构可能一直延续下去。这样的代码结构会导致代码嵌套层级过深，使得代码可读性差，难以维护和调试。回调地狱是指在异步编程中，由于多个回调函数嵌套调用，导致代码可读性差、维护困难的情况。总的来说，回调地狱是异步编程中常见的问题。
回调地狱及解决（promise）
lqj0127的博客
07-06 1568
promise封装了异步操作，本质是一个状态机。
异步编程--回调地狱
jiaojsun的博客
09-27 666
1.什么叫回调地狱 实际应用场景 &lt;script type="text/javascript"&gt; /** * 异步任务处理：回调 * * callback hell：回调地狱 */ /** * 任务链 * 我们的任务可能是一个接着一个的，而且是有依赖关系的 */ var xhr = new XM...
回调地狱 与 Promise（JavaScript）
最新发布
m0_74002634的博客
01-22 1379
想要学习Promise，我们首先要了解异步编程回调函数回调地狱Promise，中文翻译过来就是承诺，意思是承诺在未来某一个时间点返回数据给你。它是JS中的一个原生对象，是一种异步编程的解决方案，可以替换掉传统的回调函数解决方案。Promisepending（进行中），fulfilled（已成功），rejected（已失败）Promise 构造函数接收一个函数作为参数，该函数是同步的并且会被立即执行，所以我们称之为起始函数，我们需要处理的异步任务就卸载在该函数体内，该函数的两个参数是resolve。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值