【JS学习】async/await、Fetch API

最新推荐文章于 2024-05-12 15:09:28 发布
最新推荐文章于 2024-05-12 15:09:28 发布
阅读量758 收藏
点赞数
分类专栏： JS编程学习 文章标签： js javascript es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Resemee_C/article/details/117784150
版权
本文介绍了ES2017引入的async函数，它使得异步操作更加简洁。async函数返回Promise对象，await只能在async函数中使用，用于等待Promise的解决。同时，讲解了Fetch API的fetch()方法，它返回一个Promise，用于发起获取资源的请求，返回Response对象。
摘要由CSDN通过智能技术生成

async/await

ES2017引入了async函数，使异步操作变得更加方便。
1、async函数返回的Promise对象会运行执行(resolve)异步函数的返回结果，或者如果异步函数抛出异常的话会运行拒绝(reject)。
在这里插入图片描述
2、async会把返回值传递给Promise.resolve( )。

    async function testAsync(){
        return "hello async";
    }
    console.log(testAsync());
    testAsync().then((r)=>{
        console.log(r);
    })

在这里插入图片描述

await

await其实只能在async中使用。(或者在模块顶级域中可以使用，例如在浏览器控制台上可以)
如果html在引入js代码时，将type设置为module（模块）则同样可以使用不会报错。

示例
    async function testAsync(){
        let r= 0 ;
        setTimeout(()=>{
            r=2000;
        },3000);
        return
最低0.47元/天 解锁文章
Resemee_C
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 中 Fetch 是如何工作的
Trouvailless的博客
05-18 536
如何在 JavaScript 中使用 Fetch 我们在使用Fetch API获取 URL的数据时，最基本的用法只需要一个参数。当我们运行 Fetch 时，它会有一个返回值： let fetchExample = fetch("https://fjolt.com").then((res) => { // Do something with res }); Res包含一些很有意思的内置函数，如下： res.text() ：返回 URL 的文本内容。如果是网站，则返回 HTML。 r.
await fetch 本地_如何正确合理使用 JavaScript async/await！
weixin_36018748的博客
01-22 853
ES8 引入的 async/await 在 JavaScript 的异步编程中是一个极好的改进。它提供了使用同步样式代码异步访问 resoruces 的方式，而不会阻塞主线程。然而，它们也存在一些坑及问题。在本文中，将从不同的角度探讨 async/await，并演示如何正确有效地使用这对兄弟。前置知识async 作用是什么从 MDN 可以看出：async 函数返回的是一个 Promise 对象。a...
fetch异步请求使用详解
在下月亮有何贵干
10-28 6692
目录认识异步fetch(url)response.json()结合async和await异常处理post请求 认识异步 首先我们得明白请求是一个异步的过程。 因为请求需要时间向服务器发送请求和接收请求结果。 我们得要等待请求完成然后执行请求完成后的回调，来对接收到的请求结果做处理。 fetch(url) 为了方便学习，我们借用一下uni-app教程的api接口。 const url = 'https://unidemo.dcloud.net.cn/api/news' 我们需要知道fetch是基于
前端系列-4 promise与async/await与fetch/axios使用方式
最新发布
Sheng_Q的博客
05-12 1004
本文介绍promise使用方式，以及以Promise为基础的async/await用法和fetch/axios使用方式，主要以案例的方式进行。 javascript是单线程执行的，异步编程的本质是事件机制和函数回调。当执行阻塞任务或者进行IO操作时，编程时很容易嵌套多层回调，严重影响可读性和维护性，陷入地狱回调
js ES6 fetch 方法
青蛙king的博客
07-19 9385
一、fetch 概述 fetch 是一种 HTTP 数据请求的方式，是 XMLHttpRequest 的一种替代方案。 fetch 不是 ajax 的进一步封装，没有使用 XMLHttpRequest对象。fetch 是原生 JavaScript。 fetch 与 ajax 的区别： fetch()返回的promise将不会拒绝http的错误状态，即使响应是一个HTTP 404或者500——当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reje
JS fetch()用法详解
热门推荐
weixin_52148548的博客
05-11 4万+
目录了解fetch没有fetch时我们获取异步资源的方式：使用fetch后我们获取异步资源的方式fetch的语法fetch的Response对象1.同步属性2.判断请求是否成功发出3.操作标头4.读取Response对象内容的方法5.创建副本（clone）6.底层接口定制HTTP请求取消fetch请求 了解fetch - Fetch API 提供了一个获取资源的接口（包括跨域请求），用于取代传统的XMLHttpRequest的，在 JavaScript 脚本里面发出 HTTP 请求。 - 目前还没有被所有
await fetch 本地_如何正确合理使用 JavaScript async/await
weixin_39651488的博客
01-30 159
点击上方“筑梦前端”欢迎订阅ES7 引入的async/await在 JavaScript 的异步编程中是一个极好的改进。它提供了使用同步样式代码异步访问resoruces的方式，而不会阻塞主线程。然而，它们也存在一些坑及问题。在本文中，将从不同的角度探讨async/await，并演示如何正确有效地使用这对兄弟。前置知识async 作用是什么从MDN可以看出：async函数返...
async/await让异步操作同步执行的方法详解
10-16
- 文件系统操作：在Node.js中，进行文件读写时，文件操作通常是异步的，`async/await`可以提高代码可读性。 - 多个异步操作的序列执行：通过嵌套的`async`函数或`await`结合`Promise.all`，可以控制异步操作按特定...
详解async/await 异步应用的常用场景
10-17
async/await 是 JavaScript 中用于处理异步操作的一种方式，它引入了Promise的语法糖，使得异步代码更易于理解和编写，看起来更接近同步代码。然而，尽管async/await使得代码更加优雅，但异步的本质复杂性并未改变，...
小程序如何支持使用 async/await详解
10-16
在JavaScript的世界里，`async/await`是一种处理异步操作的强大工具，它使得代码看起来更加同步，提高了可读性和可维护性。然而，微信小程序原生并不支持`async/await`语法，因为它是基于JavaScript的轻量级运行环境...
async / await 解决回调地狱
01-08
let response = await fetch('https://api.example.com/data'); let data = await response.json(); console.log(data); } catch (error) { console.error('Error:', error); } } ``` 在这个示例中，`fetch`...
js代码-async/await sleep
07-16
在压缩包中，`main.js`可能包含了使用`async/await`和`sleep`的实际代码示例，而`README.txt`可能提供了有关如何运行和测试这些示例的说明。理解`async/await`和`sleep`的使用有助于编写更高效、更易于维护的异步...
使用async/await解决fetch
bl_ack233的博客
08-11 1501
返回的是一个promise实例对象，所以它的后面可以跟.then，但是这个.then中触发的成功回调或者失败回调仅仅是判断这个请求是否连接到服务器，并不会返回服务器发送回来的数据。得到一个新的promise，并且return出去，紧跟后面的.then就可以采用链式.then的方法再次获得成功的回调(服务器返回的数据在里面)。当然也要等待它返回一个成功态promise，并将其赋值给data，此时的data就是。这种写法可以使用同步执行的思考来看待这个请求，对于promise的理解更深一步加强。........
Promise,async,await,fetch详解
hyupeng1006的博客
04-01 2199
Promise: 在ES6以前如果我们需要在js中进行异步处理，大多数都是通过使用回调函数的方式来解决问题，如果简单的异步处理，回调函数的方式看起来还是比较优雅的，逼格还有点高，但是如果异步操作很多，回调嵌套就很深，代码看起来就会特别别扭，维护起来成本也会变高这个时候ES6带来Promise这个新特性，这个方法很好的解决了深层次异步嵌套的问题，我们在写代码的时候可以采用类似linux流式的书写方式...
async js 返回值_ES6（四）：fetch、ES7（async、await）
weixin_39537049的博客
11-30 434
认识fetchfetch是基于promise的API。使用fetch时，需要用到url。这里的body我们并不能拿到，要解析一下：将获取到的response对象，解析称为正常可读的对象。解析完了之后，就是data。这里的error，不会打印，只会提示我们404，只要返回码超过300，就不会打印。包括其他的方法也是。只有当前面域名地址出错，才会得到error。fetch请求三种数据格式：请求纯文本：...
JS 异步编程终极解决方案 async/await 的使用手册
圆圆的 JavaScript 博客
01-19 4966
ES8 提出了 JS 异步编程终极解决方案 async/await 。No more callback hell。使用 关键字 async 来表示，在函数内部使用 await 来表示异步。简单来说，它们是基于promises的语法糖，使异步代码更易于编写和阅读。通过使用它们，异步代码看起来更像是老式同步代码，因此它们非常值得学习。
await fetch 本地_JavaScript async/await 正确合理使用
weixin_34637857的博客
01-30 700
ES8 引入的 async/await 在 JavaScript 的异步编程中是一个极好的改进。它提供了使用同步样式代码异步访问 resoruces的方式，而不会阻塞主线程。然而，它们也存在一些坑及问题。在本文中，将从不同的角度探讨 async/await，并演示如何正确有效地使用这对兄弟。前置知识async 作用是什么从 MDN 可以看出：async 函数返回的是一个 Promise 对象。as...
JavaScript请求数据的4种方法总结（Ajax、fetch、jQuery、axios）
激情人生，美好生活
08-17 6304
JavaScript请求数据有4种主流方式，分别是Ajax、fetch、jQuery和axios。
promise与 fetch、async/await
luemeon的博客
11-14 496
包裹，这样传进promise.all的数据都是resolved状态的。catch方法返回的promise实例会被。在Promise里，执行顺序是。
教我怎么使用 async/await 获取api数据
04-22
好的，您可以这样使用async/await获取api数据： async function getData() { try { const response = await fetch('your-api-url'); const data = await response.json(); return data; } catch (error) { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值