promise 和 await

最新推荐文章于 2024-08-22 14:32:34 发布
最新推荐文章于 2024-08-22 14:32:34 发布
阅读量273 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QQ2856639881/article/details/124543724
版权

javascript 前端 vue.js 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        const src1 = 'url 1111'
        const src2 = 'url 2222'

        //模拟延时
        function sleep(sleepTime) {
            var start = new Date().getTime();
            while (true) {
                if (new Date().getTime() - start > sleepTime) {
                    break;
                }
            }
        }

        //模拟http请求
        function http_request(src) {
            return new Promise(function (resolve, reject) {
                sleep(1000)
                resolve(src)
            })
        }

        //await
        async function load() {
            const result1 = await http_request(src1)
            console.log('load result1', result1)

            const result2 = await http_request(src2)
            console.log('load result2', result2)
        }


        //不用await
        function load2() {
            http_request(src1).then(data => {
                console.log('load2 result1', data)
            })
            console.log('load2 11111');

            http_request(src2).then(data => {
                console.log('load2 result2', data)
            })
            console.log('load2 22222');
        }
        console.log('time1', new Date());
        load()
        console.log('time2', new Date());
        load2()
        console.log('time3', new Date());
    </script>

    <pre>
    结果: 
    time1 Mon May 02 2022 17:21:07 GMT+0800 (中国标准时间)
    time2 Mon May 02 2022 17:21:08 GMT+0800 (中国标准时间)
    load2 11111
    load2 22222
    time3 Mon May 02 2022 17:21:10 GMT+0800 (中国标准时间)
    load result1 url 1111
    load2 result1 url 1111
    load2 result2 url 2222
    load result2 url 2222
    </pre>
</body>

</html>

异步解决方案----Promise与Await - 简书

QQ2856639881
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
promise、async和await
zy_lalala的博客
05-01 5701
promise JavaScript是单线程 因为js语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。 异步任务 但这样很容易造成阻塞，所以把任务分成了同步任务和异步任务两种，异步模式可以同时执行多个异步任务，当主线程遇到异步任务，就把异步任务放进’任务队列’里，执行完同步任务后，再循环的去检查任务队列里面有哪些异步任务要执行， 回调函数 在没有promise前，使用的是回调函数的方式来执行异步任务，就是当主线程开始执行这个异步任务时，就去执行这个异步任务对应的回调函数。 异步任务比如：ajax
Promise、async和await
软件测试的坑，让我来踩吧
08-16 1436
在JavaScript中，难免会遇到异步访问的场景，比如打开文件，访问数据库等等。如果不做好异步控制，会导致意外结果，比如：返回值还没返回就想调用，所以就需要用到Promise。
C# HTTP请求 异步(async await)
qq_18932003的博客
10-23 2963
C# HTTP请求 异步(async await) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
Http、Async+Await
前端Cocoko
01-05 838
http、await/async
Promise和await结合使用
qq_42931285的博客
11-27 4013
async function async1(){ return new Promise(resolve=>{ resolve(2); }) } async function async2(){ let c = await async1(); let d = new Promise((resolve,reject)=>{ resolve(c); }) console.log("d为多少"); console.log(d); } async2(); 结果如下：
Promise Async+await实现原理及案例分析
04-03
Promise Async+await实现原理及案例分析
Async/Await替代Promise的6个理由
10-16
与Promise相比，Async/Await提供了一种更加直观和易于理解的方式来处理异步编程。本文将详细介绍为何Async/Await可以替代传统的Promise，并通过具体的代码示例来展示其优势。 首先，我们需要了解Async/Await是建立...
async/await与promise（nodejs中的异步操作问题）
10-20
#### 综合使用async/await和Promise 在实际应用中，我们可以结合`async/await`和Promise来简化异步操作。例如，构建一个函数来获取文章详情并渲染文章页面，涉及多个异步数据库查询： ```javascript async ...
JS 异步编程与Promise async await语法糖
01-20
JavaScript中的异步编程是...总结来说，JavaScript的异步编程通过Promise和事件循环机制，以及更易读的`async/await`语法糖，实现了对非同步操作的高效管理。理解这些概念对于编写高性能的前端和Node.js应用至关重要。
async和await的用法
05-09
**async和await是ES2017（也称为ES7）中的重要特性，它们为JavaScript开发者带来了更优雅的异步编程解决方案。** 首先，我们来深入理解**async关键字**。async标识符用来定义一个异步函数。当你在函数前加上async，...
swiper 切换到指定slide
QQ2856639881的专栏
06-28 2859
1、 如果是指定初始位置，用initialSlide this.swiper = new Swiper(".swiper-container", { initialSlide: this.curr_index, loop: true, slidesPerView: 1.1, spaceBetween: 2, // pagination: { // el: '.swiper-pagination', // ..
vue2 获取不到 Vue.prototype.$abc 的一种情况
QQ2856639881的专栏
02-07 849
在 index.vue中的赋值应改为 Vue.prototype.$abc = {.....}然后又在index.vue中 this.$abc = {.........}这样在其他地方使用 this.$abc 获取到的依然是{}
js封装api
QQ2856639881的专栏
06-08 534
1、 http.js import '../js/jquery-3.3.1.min.js' //这个地方居然要如此引用 import _url from './config.js' import util from '../utils/util.js' import '../js/jquery-3.3.1.min.js' //这个地方居然要如此引用 export default { /** * 传入 headers data */ post: funct...
echarts属性的设置（完整大全）
QQ2856639881的专栏
02-28 345
// 全图默认背景 // backgroundColor: ‘rgba(0,0,0,0)’, // 默认色板 color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed', '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0', '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700', '#6699FF','#ff6666','#3cb3.
js datetime相关函数 本月本季度本年 下月 下季度 下年第一天
QQ2856639881的专栏
06-20 296
export default { formatNumber: n => { n = n.toString() return n[1] ? n : '0' + n }, formatTime3: date => { const year = date.getFullYear() const month = date.getMonth() + 1 const day = date.getDate() const hour = date.g.
js string to json 出错
QQ2856639881的专栏
08-24 224
string to json 有多种方式 var obj = eval('(' + str + ')'); 或者 var obj = str.parseJSON(); 或者 var obj = JSON.parse(str); 但是对于非标准的json字符串， 比如{name:'name',cnname:'姓名'} 因为key没有引号，使用JSON.parse会报错 但用 eval 就可以 ...
js测试题
QQ2856639881的专栏
06-05 122
//1 如何在JS中动态添加/删除对象的属性？ 如下文如何删除 user.age? let user = new Object(); user.name = 'Anil'; user.age = 20; //2 说说对promise 以及 await 的理解， 如何把vue中的http请求包装成promise //3 js Array中 filter、map 如何使用？ 两者有何区别 //1）筛选value>10的数据 2） 将value的值改成其平方并返回， 希望得到的结..
vue开发引入第三方插件的方式及其区别
最新发布
你们瞎搞
08-22 362
npm。
promise和await async的区别
11-09
Promise和async/await都是用于处理异步操作的方式，但它们之间有一些区别： 1. 语法不同：Promise使用then()和catch()方法来处理异步操作的结果，而async/await使用async函数和await关键字来处理异步操作的结果。 2. 错误处理不同：在Promise中，错误处理通常在catch()方法中完成，而在async/await中，错误处理通常使用try-catch语句完成。 3. 可读性不同：async/await使异步代码看起来像同步代码，更易于阅读和理解。 4. Promise可以处理多个异步操作，而async/await只能处理一个异步操作。 下面是一个使用Promise和async/await处理异步操作的示例： 使用Promise： ```javascript function getData() { return new Promise((resolve, reject) => { setTimeout(() => { resolve('data'); }, 1000); }); } getData().then(data => { console.log(data); }).catch(error => { console.log(error); }); ``` 使用async/await： ```javascript async function getData() { return new Promise((resolve, reject) => { setTimeout(() => { resolve('data'); }, 1000); }); } async function main() { try { const data = await getData(); console.log(data); } catch (error) { console.log(error); } } main(); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值