Promise对象和async/await

最新推荐文章于 2024-03-27 16:22:07 发布
最新推荐文章于 2024-03-27 16:22:07 发布
阅读量98 收藏
点赞数
分类专栏： js 文章标签： javascript 前端 mysql
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44892365/article/details/128085073
版权

一.CRUD接口的实现

1.增加记录：insert into 表名(列名1，列名2，列名3，……) values(值1，值2，值3，……)

        模型名.create({}).then((result)=>{

                保存成功后的回调

        }).catch((err)=>{

                操作出现异常的处理代码

        })

//插入记录的接口：http://127.0.0.1:3000/studentapi/addStudent
router.post('/addStudent',(req, res) => {
    try {
    Student.create({
        // id:1003,
        // name:'小小志',
        // sex:'男',
        // age:16,
        // address:'中国台湾'
        id:req.body.student_id,
        name:req.body.student_name,
        sex:req.body.student_sex,
        age:req.body.student_age,
        address:req.body.student_address
    }).then((result)=>{
        // res.send(JSON.stringify(result))
        if (result){
            res.json({
                code:1002
            })
        }
    })
    }catch (e) {
        console.log(e)
        res.json({
            code:1000
        })
    }
})

2.删除记录：delete from 表名 [where条件]

        模型名.destroy({

                where: {

                        列名: 值

                }

        }).then((result)=>{

                删除成功后的回调

        }).catch((err)=>{

                操作出现异常的处理代码

        })

delete方式请求：接收客户端数据时采用的是 req.body.参数名 的方式

//删除记录的接口 http://127.0.0.1:3000/studentapi/deleteStudent
router.delete('/deleteStudent',(req, res) => {
    let bid = req.query.id //接收客户发送的id
    try{
        Student.destroy({
            where:{
                id:bid
            }
        }).then((result)=>{//result中保存的是被删除的记录数
                res.json({
                    code:1003,
                    msg:result
                })
        })
    }catch (e) {
        console.log(e)
        res.json({
            code:1000,
            msg:'删除失败'
        })
    }
})

3.更新记录：update 表名 set 列名1=值1，...[where 条件]

        模型名.update({修改的列},{where 条件}).then((result)=>{
                更新成功后的回调
        }).catch((e)=>{
                出现异常的回调
        })
put方式：后台接收参数的方式 req.body.参数名 

//更新记录的接口 http://127.0.0.1:3000/studentapi/updateStudent
router.put('/updateStudent',(req, res) => {
    //1.先获取所有字段的值
    let {U_id,U_name,U_sex,U_age,U_address}=req.body
    try{
        //2.更新满足条件的记录
        Student.update({
            name: U_name,
            sex: U_sex,
            age: U_age,
            address: U_address
        },{
            where:{
                id: U_id
            }
        }).then((result)=>{
                res.json({
                    code:result
                })
        })
    }catch (e) {
        console.log(e)
    }
})

4.查询记录

（1）查询所有记录：

        模型名.findAll().then((result)=>{//result是一个数组，存放的是从数据库中查询到的所有记录
                查询成功后的回调
        }).catch(e){
                执行查询出现异常的回调
        }

//查询所有记录的接口 http://127.0.0.1:3000/studentapi/selectStudent
router.get('/selectStudent',(req, res) => {
    Student.findAll().then((result)=>{//result存放的是从数据库中查询到的数据
        res.json(JSON.stringify(result))
    })
})

强调：在执行带条件查询时需要导入Sequelize模块中的Op子模块，在Op子模块中有条件查询的关键字

        const Op = require('sequelize').Op //导入sequelize模块的Op

（2）模糊查询

const Op = require('sequelize').Op //导入sequelize模块的Op
//模糊查询（按姓氏查询） http://127.0.0.1:3000/studentapi/selectLikeStudent
router.post('/selectLikeStudent',(req, res)=>{
    //1.获取前端发送的作者的姓氏
    let firstName = req.body.firstname
    //2.进行模糊查询
    Student.findAll({
        where:{
            name:{
                [Op.like]:firstName + '%'
            }
        }
    }).then((data)=>{
        res.json(data)
    }).catch((e)=>{
        console.log(e)
        res.json('查询失败')
    })
})

（3）按id查询

//按id查询： http://127.0.0.1:3000/studentapi/selectIdStudent
router.post('/selectIdStudent',(req, res)=>{
    //1.获取客户端发送的id
    let F_id = req.body.id
    //2.进行查询
    Student.findOne({
        where:{
            id:F_id
        }
    }).then((data)=>{
        res.json(data)
    }).catch((e)=>{
        console.log(e)
        res.json('查询失败')
    })
})

二.回调地狱

1.回调函数：把一个函数作为参数传递给另一个函数，在另一个函数中作为参数的函数不会立即执行，只有当满足某个条件后才会执行，这个函数称为回调函数。

2.同步任务：主线程任务队列中的程序依次执行，只有当前一个任务执行结束后才会执行后一个任务

3.异步队列：不会进入主线程队列。前一个任务是否执行完毕不影响下一个任务的执行

console.log('1')
setTimeout(function(){
    console.log('2')//异步任务
},0)
console.log('3')

异步任务又称为不阻塞任务：前一个任务的执行不阻塞后一个任务的执行

4.什么是回调地狱：回调函数嵌套回调函数就会形成回调地狱。使代码维护起来很困难。

5.回调地狱的缺点：

（1）可读性差，维护困难

（2）无法进行return和throw

（3）多个回调之间无法建立联系

三.Promise对象：是一个原生的js对象，为了解决回调地狱问题，可以替换掉回调函数。是一个新的异步任务的解决方案。

1.promise的三种状态

（1）pending[待定] 初始状态

（2）resolve[实现] 操作成功

（3）reject[被否定] 操作失败

2.执行过程：

（1）当promise对象的状态发生改变时就会触发后面的.then()的响应函数来执行后续的操作

（2）状态一经改变就不会再变 

（3）promise对象一经创建就会立即执行  ---  异步任务的同步效果

强调：promise为什么能连续的.then ---> 因为.then里面的回调函数的返回值也是一个promise对象

3.构造函数

        Promise((resolve,reject)=>{})
        resolve:表示异步操作成功后的回调函数，将promise对象的状态由初始状态转换到成功状态，并将回调函数的执行结果传递出去，由下一个then来接收...
        reject:表示异步操作失败后的回调函数，在回调函数执行错误时调用，并将错误的信息作为参数传递出去，由catch来接收...

function fun(str){
    // 创建Promise对象
    let p = new Promise((resolve,reject)=>{
        var flag = true
        if (flag) {
            resolve(str)
        }else{
            reject('操作失败')
        }
    })
    return p
}
fun('武林要以和为贵').then((data)=>{
    console.log(data)
    return fun('要讲武德') //返回一个Promise对象
}).then((data)=>{
    console.log(data)
    return fun('不要窝里斗')//返回一个Promise对象
}).then((data)=>{
    console.log(data)
}).catch((e)=>{
    console.log(e)
})

4.Promise的all方法：实现了异步任务的并行执行能力

function getWidth(){//返回Promise对象
    return new Promise((resolve,reject)=>{
        setTimeout(resolve(5),3000)
    })
}
function getHeight() {//返回Promise对象
    return new Promise((resolve,reject)=>{
        setTimeout(resolve(6),1000)
    })
}
Promise.all([getWidth(),getHeight()]).then((result)=>{//调用两个异步函数，实现并行运行
    console.log('结果：',result)
})

四.async函数和await函数：ES7出现的

1.Promise对象的缺陷：虽然跳出了回调地狱，但是在流程复杂的代码中会出现很多的then，这样导致代码的可读性也很差

2.async/await出现的原因：是对Promise的一种优化，又称为Promise的语法糖

var sleep = function(time){
    return new Promise((resolve,reject)=>{
        setTimeout(() => {
            resolve('+++')
        },time);
    })
}
var start = async function(){//异步调用，实现同步效果
    console.log('start')
    await sleep(3000).then((data)=>{
        console.log(data)
    })
    console.log('end')
}
start()

3.async/await的使用规则


（1）await关键字只能在async标识的函数中使用


（2）await后面可以直接跟一个Promise对象（更多的是跟一个返回Promise对象的表达式）


（3）await函数不能单独使用


（4）await可以直接拿到Promise中resolve中的数据。

function fn(str){//返回值是一个Promise对象
    //创建Promise对象
    var p = new Promise((resolve,reject)=>{
        var flag = true
        if (flag) {
            resolve(str)
        }else{
            reject('操作失败')
        }
    })
    return p
}
async function test(){
    let r1= await fn('111')
    let r2 = await fn('222')
    let r3 = await fn('333')
    // console.log(r1,r2,r3)
    console.log(r1)
    console.log(r2)
    console.log(r3)
}
test()

4.promise和async/await区别

（1）promise是ES6中出现，async/await是在ES7中出现

（2）async/await的写法更优雅

（3）对reject状态的捕捉方式不同

        a.promise采用.then后面跟.catch方法捕捉，通常.catch放在最后

        b.async/await可以用.then后面跟.catch方法捕捉，也可以用try...catch方式捕捉

m-TT
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
promise、async和await
zy_lalala的博客
05-01 5712
promise JavaScript是单线程 因为js语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。 异步任务 但这样很容易造成阻塞，所以把任务分成了同步任务和异步任务两种，异步模式可以同时执行多个异步任务，当主线程遇到异步任务，就把异步任务放进’任务队列’里，执行完同步任务后，再循环的去检查任务队列里面有哪些异步任务要执行， 回调函数 在没有promise前，使用的是回调函数的方式来执行异步任务，就是当主线程开始执行这个异步任务时，就去执行这个异步任务对应的回调函数。 异步任务比如：ajax
异步编程：回调函数(Callback)、Promise 对象和 async/await
ASerendipity_的博客
03-11 422
async/await 是 ECMAScript 2017 中引入的异步编程新特性，它基于 Promise 对象，提供了更简洁的语法来处理异步操作。async 函数返回一个 Promise 对象，await 关键字用于等待一个 Promise 对象的解决（resolve）。Promise 是 JavaScript 的异步编程解决方案之一，它表示一个异步操作的最终完成或失败的结果。回调函数是异步编程的最基本方式，它通过将一个函数作为参数传递给另一个函数，在异步操作完成后调用该函数来处理结果。
详解promise、async和await的执行顺序
weixin_33727510的博客
06-02 285
1、题目和答案 一道题题目：下面这段promise、async和await代码，请问控制台打印的顺序？ async function async1(){ console.log('async1 start') await async2() console.log('async1 end') } async function async2(){ console.log('asyn...
终于理清楚了Promise以及async和await
KAMHUNCHAN的博客
02-17 4285
promise理解： 1，是js异步编程的新的解决方案 2，是一个构造函数 3，用来封装一个异步操作，并可以获得其结果 promise三个状态： 1，pendding 未确定 2，resolved 成功 3，rejected 失败 注：状态只能改变一次，成功数据称为value，失败称为reason promise的基本使用 为什么要用Promise： 1.指定回调函数的方式灵活，可以在异步任务前指定也可以在异步任务后指定，而以前指定回调函数必须在异步任务开始前指定。 2.支持链式调用，可以解决
Promise 的 async 与 await
浮生离梦的博客
08-08 477
一、async 与 await async 函数，如下所示： 函数的返回值为 promise 对象 promise 对象的结果由 async 函数执行的返回值决定 await 表达式，如下所示： await 右侧的表达式一般为 promise 对象, 但也可以是其它的值 如果表达式是 promise 对象, await 返回的是 promise 成功的值 如果表达式是其它值, 直接将此值作为 await 的返回值 注意点，如下所示： await 必须写在 async 函数中, 但 as
Promise和async/await
酷爱前端的小陈博客
04-20 823
1. 回调地狱 多层回调函数的相互嵌套，就形成了回调地狱。示例代码如下： 回调地狱的缺点： 代码耦合性太强，牵一发而动全身，难以维护 大量冗余的代码相互嵌套，代码的可读性变差 1.1 如何解决回调地狱的问题 为了解决回调地狱的问题，ES6（ECMAScript 2015）中新增了 Promise 的概念。 2.Promise 的基本概念 ① Promise 是一个构造函数 我们可以创建 Promise 的实例const p = new Promise() ...
详解小程序原生使用ES7 async/await语法
10-18
regenerator是一个广泛使用的工具，它可以将ES7的async/await语法转换为ES5的Promise代码，让小程序能够识别和执行。具体操作是在GitHub上下载regenerator库，然后将其中的regenerator-runtime文件夹复制到小程序...
异步Promise及Async/Await详解
qq_15859173的博客
12-21 700
一、为什么有Async/Await？ 我们都知道已经有了Promise的解决方案了，为什么还要ES7提出新的Async/Await标准呢？ 答案其实也显而易见：Promise虽然跳出了异步嵌套的怪圈，用链式表达更加清晰，但是我们也发现如果有大量的异步请求的时候，流程复杂的情况下，会发现充满了屏幕的then，看起来非常吃力，而ES7的Async/Await的出现就是为了解决这种复杂的情况。 首先，我们必须了解Promise。 二、Promise简介 2.1 Promise实例 什么是Promise，很多人应该
promise与async和await
weixin_60414376的博客
01-27 1560
目录一）同步与异步二、promise1、出现原因：2、promise注意事项：3、promise.all（）使用。三）async和await。由于js是单线程语言，下面代码尽管setTimeout在上，但最后-仍然会先输出下面的2，等待一秒之后再是输出前面的1。 使用promise就会实现异步操作。下面代码会过0.5秒输出1，再过1秒输出2 2、promise注意事项： 1、new promise(()=>{})里面参数为箭头函数 2、箭头函数的第一个参数是resol
Promise详解及Async/Await
最新发布
weixin_44446127的博客
03-27 2362
await后面跟一个Promise对象，它会“等待”这个Promise对象变为fulfilled状态，并返回其结果。更灵活的异步操作组合：Promise支持多个异步操作的组合，比如通过Promise.all()等待所有异步操作完成，或者通过Promise.race()只等待第一个完成的异步操作。更好的错误处理：Promise提供了.catch()方法，用于捕获异步操作过程中发生的错误。Promise是es6中引入的一个新的对象，用于表示一个异步操作的最终完成（或失败）及其结果值。
promise与async/await解析
shao_xuan_的博客
02-17 4684
promise与async/await解析问题引入什么是回调地狱实例回调地狱产生的问题Promise什么是promisepromise实现Promise--all的用法Promise--race的用法async/await使用async/await基本规则捕捉错误 问题引入 什么是回调地狱 回调函数中嵌套回调函数的情况就叫做回调地狱。回调地狱就是为是实现代码顺序执行而出现的一种操作。 实例 setTimeout(()=>{ console.log('这是第一步') setTimeout
Promise，async、await的理解与使用
Javavison的博客
05-11 603
在一个页面中进行一个操作时，需要进行网络请求，如果这个网络请求是同步的，又因为网络请求需要时间，js代码就会停留在那一部分，就会使得这个页面进入阻塞状态，一直等到网络请求完之前都不能跟页面互动。 一般会给网络请求开启一个异步任务，让页面其他部分正常执行，网络请求完了以后会给一个回调函数，就可以从回调函数里得到网络请求得到的数据（或者请求失败的信息），给后面的js代码使用。 ...
js：Promise理解、async和await的理解、宏任务/微任务、异常处理、防抖和节流
Litt_White的博客
08-14 4857
Promise理解、async和await的理解（未完成）、构造函数/原型/原型链、防抖和节流、this指向（普通函数，箭头函数，JS/Vue的this）、上下文环境、作用域和闭包
Promise 和 async-await的区别-前端面试题
ALoye_喜樂的博客
01-04 1965
Promise 和 async-await 都是优化异步编程体验的解决方案。 Promise async-await promise 出现解决了传统 callback 函数回调地域的问题，支持链式调用可以停.then,promise 分别有 3 种状态一旦函数执行 promise 有了结果就无法改变，遇到复杂的业务逻辑 promise 显然不是那么方便需要不停 then 这样语法显然也不美观。 async,await 是基于 promise 实现的，它是基于 Generator 函数的语法糖
Promise、Async、await使用及源码
java_vava2的博客
05-26 232
作用：多个具有依赖关系的异步任务 状态明确之后无法更改 <script> new Promise(function(resolve,reject){ }) </script>
promise（7）——使用await获取Promise对象的PromiseResult
热门推荐
木子 旭的博客
03-08 1万+
1.await必须在async定义的方法中使用 let e = await 78910; console.log(e); 2.当await右边为一个PromiseState为fulfilled的Promise对象时，则返回其PromiseResult值 async function main() { let p = new Promise((resolve, reject) => { resolve(156); }); let result = await p; conso
promise和async/await的区别
08-21
promise和async/await都是用于处理异步操作的方式，但它们在语法和使用上有一些区别。 1. Promise：Promise是ES6引入的一种处理异步操作的方式。它是一个对象，表示一个异步操作的最终完成（或失败）及其结果的值。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值