Fetch API总是返回一个promise - 腾讯云开发者社区

文章/答案/技术大牛

发布

手写一个Promise Class版本及Promise的api使用方法

() then() 方法返回一个 Promise。...如果 then 中的回调函数：返回了一个值，那么 then 返回的 Promise 将会成为接受状态，并且将返回的值作为接受状态的回调函数的参数值。...返回一个已经是接受状态的 Promise，那么 then 返回的 Promise 也会成为接受状态，并且将那个 Promise 的接受状态的回调函数的参数值作为该被返回的Promise的接受状态回调函数的参数值...返回一个已经是拒绝状态的 Promise，那么 then 返回的 Promise 也会成为拒绝状态，并且将那个 Promise 的拒绝状态的回调函数的参数值作为该被返回的Promise的拒绝状态回调函数的参数值...(iterable) 方法返回一个 promise，一旦迭代器中的某个promise解决或拒绝，返回的 promise就会解决或拒绝。

6413 0

asyncawait初学者指南

type=single') .then(res => res.json()) .then(json => console.log(json.joke)); } 异步函数总是返回一个promise...第一件需要注意的事情是，async函数总是返回一个promise，即使我们不显式地告诉它这么做。...Node还在其内置的util模块中添加了一个promise函数，可以将使用回调函数的代码转换为返回promise。而从v10开始，Node的fs模块中的函数可以直接返回promise。...cause: Error: getaddrinfo ENOTFOUND non-existent-url.dev Finished fetching data 这种结果是因为fetch返回一个promise...这将返回一个promise，而这个promise将被解析为一个模块对象，这意味着我们可以这样做： const locale = 'DE'; const { default: greet } = await

1.2K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

一文吃透 Promise 与 asyncawait，异步编程也能如此简单！建议收藏！

就是一个返回 Promise 的 API。...来，让我们来感受一下差距 Promise 写法fetch("/api/data") .then((res) => res.json()) .then((data) => console.log("数据...async 表示这个函数里有异步逻辑await 用来“等待”一个 Promise 的结果七、async/await 的几个重点规则✅ 1. async 函数总是返回一个 Promiseasync function...，并且需要等全部成功后再处理，那么我们就需要使用：const getUser = fetch("/api/user");const getPosts = fetch("/api/posts");const...，那么就可以使用：const res = await Promise.race([fetch("/a"), fetch("/b")]);以上的代码，如果 /a 先执行完，那么就 res 就是 /a 的返回结果

5511 0

Fetch：新一代Ajax API

Fetch API，W3C的正式标准，是XMLHttpRequest的最新替代技术：基于 Promise 设计语义化API（Header、Request、Response）良好的数据转换接口（text...same-origin"、"include"，默认为"omit"；注：omit->从不发送Cookie； same-orign->同源才发送Cookie； include->总是发送...为保持对未来“流”API的支持，限制response只能被读取一次； json(): 返回被解析为JSON格式的Promise对象； text(): 返回被解析为String格式的Promise...更详细的Fetch API说明，请参考MDN官网.......参考： https://fetch.spec.whatwg.org/ https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API ?

9613 0

【Web前端】Promise的使用

二、使用 fetch() API fetch() API 是一个现代的网络请求接口，广泛用于发起网络请求并处理响应。...它返回一个 Promise，使得异步操作的管理变得更加简单和直观。fetch() 通常用于获取网络资源，如 RESTful API 的数据。...在第一个 .then() 处理程序中，我们输出第一个数据并返回另一个 fetch() 请求，以发起第二个异步操作。...const promise1 = fetch('https://api.example.com/data1'); const promise2 = fetch('https://api.example.com...如果任何一个 Promise 解决失败，错误信息将被捕获并输出到控制台。 async 函数的返回值 async 函数总是返回一个 Promise，即使函数内没有显式返回值。

9710 0

Ajax 之战：XMLHttpRequest 与 Fetch API

Fetch Fetch 是一个现代基于 promise 的 Ajax 请求 API，首次出现于 2015 年，在大多数浏览器中都得到了支持。...' } ); 这将返回一个不能读取但可以被其它的 API 使用的响应。...例如，你可以使用 Cache API 存储返回再之后使用，可能从 Service Worker 返回一个图像、脚本或 CSS 文件。...凭证控制 XMLHttpRequest 总是发送浏览器 cookie，Fetch API 不会发送 cookie，除非你显式地在第二个参数 init 对象中设置 credentials 属性。...fetch() 的 Response 对象提供了 status 和 ok 属性，但并不总是显式地需要检查它们，XMLHttpRequest 更明确，因为单个回调函数处理每一个结果：你应该在每个示例中都看到

3.1K2 0

JavaScript进阶-asyncawait语法糖

async: 是一个关键字，用于声明一个异步函数。异步函数内部可以使用await关键字。...基本用法 async function fetchData() { const response = await fetch('https://api.example.com/data'); const...避免策略： async function fetchData() { try { const response = await fetch('https://api.example.com/...return results; } 易错点3：忘记async函数返回Promise 问题表现：误以为async函数直接返回的是值，而非Promise。...避免策略：明确async函数总是返回Promise，并在需要返回具体值时使用return语句。

4971 0

await 只在 async 函数中工作

它可以放在函数前，就像这样： async function f() { return 1; } 函数前的 “async” 意味着一件简单的事情：函数总是会返回 promise。...例如，上述代码中返回一个带有结果 1 的 resolved promise，我们可以进行测试： f().then(alert); // 1 …我们可以显式的返回一个 promise，结果相同： async...function f() { return Promise.resolve(1); } f().then(alert); // 1 因此， async 确保函数返回一个 promise，并在其中封装非...总结函数前的 async 关键字有两个作用：总是返回 promise。允许在其中使用 await。...否则，就会返回值，我们可以给它分配一个值。它们一起为编写易于读写的异步代码提供了一个很好的框架。

2.6K1 0

Promise与AsyncAwait：异步编程的艺术

// 定义一个异步函数 async function fetchInfo() { try { const response = await fetch('https://api.example.com...() 和 Promise.race() Promise.all(iterable)接受一组Promise并返回一个新的Promise，只有当所有 Promise 都成功时才会变为 resolved ，否则只要有任意一个...async function asyncFunction() { try { let response = await fetch('https://api.example.com/data...failed:', error); } } Async/Await与Promise的转换 Async函数实际上会返回一个Promise，这意味着我们可以用Promise的方法来处理其结果。...async function getData() { const response = await fetch('https://api.example.com/data'); const data

6141 0

聊聊JavaScript的Asynchronous

它必须等到工作完成才能返回一些东西。...[chaining] 为了使链接正常工作，该函数应始终返回一个Promise。请参阅以下示例以了解正确用法。...[chaining] Promise链的一个常见示例是 Fetch API： [chaining 例] 处理多个 Promise Javascript 提供了很少的方法来处理多个 Promise。...Async/Await Async/Await 是处理 Promise 的一种更简洁的方式。以 async 为前缀的函数总是返回一个 Promise。...我们可以使用 async/await 修改我们之前的 Fetch API 示例，如下所示： [async function example] ps: 以后再详细讨论处理更多的异步 JS~~~

9233 0

带你理解 Asyncawait

它可以被放置在任何函数前面，像下面这样： async function f() { return 1; } 在函数前面的「async」这个单词表达了一个简单的事情：即这个函数总是返回一个 promise...即使这个函数在语法上返回了一个非 promise 的值，加了「async」这个关键字就会指示 JavaScript 引擎自动将返回值包装成一个解析后的 promise。...… 我们也可以显式返回一个 promise，结果是一样的： async function f() { return Promise.resolve(1); } f().then(alert);...// 1 所以说，async 确保了函数的返回值是一个 promise，也会包装非 promise 的值。...githubResponse = await fetch(`https://api.github.com/users/${user.name}`); let githubUser = await

1.5K1 0

JavaScript 异步之巅：深入理解 ES6 Promise

因为 .then() 方法总是返回一个新的 Promise，所以你可以将它们链式调用，从而扁平化地解决回调地狱。...javascript 体验AI代码助手代码解读复制代码const promise1 = fetch('/api/1');const promise2 = fetch('/api/2');Promise.all...javascript 体验AI代码助手代码解读复制代码// 常用于设置请求超时const fetchPromise = fetch('/api/data');const timeoutPromise...返回一个数组，每个元素是一个对象，描述了每个 Promise 的结果。...javascript 体验AI代码助手代码解读复制代码// 从多个镜像源请求同一个资源，只要有一个成功就行Promise.any([fetch('mirror1.com'), fetch('mirror2

2141 0

增强你的 Fetch，或许你该考虑考虑 ultrafetch 了

可能需要一两年左右的时间，我们才能看到 Fetch API 在 Node 中完全稳定下来。当前 Fetch 实现的一个主要缺陷是缺乏内置的、符合标准的缓存系统。...每次对该端点的 API 调用都需要一个新的 HTTP GET 请求。如果这个请求总是返回相同的数据，你可以第一次缓存响应，然后在接下来的时间里从内存中读取它。...，此函数返回 true。...否则，返回 false。...): Promise; set(key: K, value: V): Promise; readonly size: number; } 上一个完整一点的例子

4471 0

ES2017 异步函数现已正式可用

另一个好处是，当我们不能使用 promise 时，还可以使用 try 和 catch： async function logger () { try { let user_id = await fetch...('/api/users/username') let posts = await fetch('/api/`${user_id}`') let object = JSON.parse(user.posts.toString...使用 async，总是会返回一个 Promise。请记住这一点，因为这也是容易犯错的地方。...async function logPosts () { try { let user_id = await fetch('/api/users/username') let post_ids =...await fetch('/api/posts/${user_id}') let promises = post_ids.map(post_id => { return fetch('

8544 0

ES2017异步函数现已正式可用

你可以进行其它事情，此时你知道午餐就要来了，虽然此刻你还无法享用它，但是这个午餐已经“promise”给你了。这就是所谓的 promise，表示一个最终会存在的数据的对象。...= await fetch('/api/users/username') let posts = await fetch('/api/`${user_id}`') let...使用 async，总是会返回一个 Promise。请记住这一点，因为这也是容易犯错的地方。...let post_ids = await fetch('/api/posts/${user_id}') let promises = post_ids.map(post_id...=> { return fetch('/api/posts/${post_id}') } let posts = await Promise.all

5171 0

Fetch还是Axios——哪个更适合HTTP请求？

在 .fetch() 方法中，我们有一个强制性参数url，它返回一个 Promise，可以使用 Response 对象来解决。 .fetch() 方法的第二个参数是选项，它是可选的。...正如我之前提到的，Promise 会返回 Response 对象，正因为如此，我们需要使用另一个方法来获取响应的主体。...作为一个现代的库，它是基于 Promise API 的。 axios 有一些优势，比如对 XSRF 的保护或取消请求。为了能够使用 axios 库，我们必须将其安装并导入到我们的项目中。...当我们创建配置对象时，我们可以定义一堆属性，最常见的是： baseUrl params headers auth responseType 作为响应，axios 返回一个 promise，该 promise...如果出现像 404 这样的错误响应，promise 就会被拒绝并返回一个错误，所以我们需要捕获一个错误，我们可以检查它是什么类型的错误，就是这样。让我们看看代码示例。

6.7K2 0

一文掌握Axios：前后端数据交互竟如此简单

axios 和 Promise 的关系 axios 是基于 Promise 实现的，也就是说 axios 请求返回的是一个 Promise 对象。...HTTP 请求，常见于 API 调用返回值提供then、catch、finally 方法返回一个 Promise，可以直接调用这些方法异常处理通过catch 方法捕获内置错误拦截器，可根据...HTTP 状态码处理不同错误扩展性需要手动封装，灵活性高内置多种配置项，如请求头、超时时间、拦截器等 Promise 的使用示例如果不使用 axios，而是手动用 fetch 或其他 API...以下是一个使用 Promise 的 HTTP 请求示例： // 使用 fetch 和 Promise function getUserData(userId) { return fetch(`https...发起请求，返回的也是一个 Promise，并通过.then() 和.catch() 来处理成功和失败的情况。

2.1K2 0

Promise 对象一网打尽

从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。 Promise对象有以下两个特点。...从上面的实现还可以看到，finally方法总是会返回原来的值。...const promises = [ fetch(’/api-1’), fetch(’/api-2’), fetch(’/api-3’), ]; await Promise.allSettled...该方法返回的新的 Promise 实例，一旦发生状态变更，状态总是fulfilled，不会变成rejected。...getFoo，它返回的就是一个Promise对象。

1.2K1 0

盘点JavaScript中asyncawait知识

在函数前面的 “async” 这个单词表达了一个简单的事情：即这个函数总是返回一个 promise。其他值将自动被包装在一个 resolved 的 promise 中。...例如，下面这个函数返回一个结果为 1 的 resolved promise。...注： async 确保了函数返回一个 promise，也会将非 promise 的值包装进去。很简单，对吧？但不仅仅这些。...注：它确保了方法的返回值是一个 promise 并且可以在方法中使用 await。四、总结本文基于JavaScript基础，介绍了async的使用。...函数前面的关键字 async 有两个作用：让这个函数总是返回一个 promise。允许在该函数内使用 await。这两个关键字一起提供了一个很好的用来编写异步代码的框架，这种代码易于阅读也易于编写。

5982 0

前端基础进阶（十五）：详解 Promise对象

从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。 Promise对象有以下两个特点。...从上面的实现还可以看到，finally方法总是会返回原来的值。...const promises = [ fetch('/api-1'), fetch('/api-2'), fetch('/api-3'), ]; await Promise.allSettled...该方法返回的新的 Promise 实例，一旦发生状态变更，状态总是fulfilled，不会变成rejected。...getFoo，它返回的就是一个Promise对象。

7872 0

点击加载更多

手写一个Promise Class版本及Promise的api使用方法

asyncawait初学者指南

一文吃透 Promise 与 asyncawait，异步编程也能如此简单！建议收藏！

Fetch：新一代Ajax API

【Web前端】Promise的使用

Ajax 之战：XMLHttpRequest 与 Fetch API

JavaScript进阶-asyncawait语法糖

await 只在 async 函数中工作

Promise与AsyncAwait：异步编程的艺术

聊聊JavaScript的Asynchronous

带你理解 Asyncawait

JavaScript 异步之巅：深入理解 ES6 Promise

增强你的 Fetch，或许你该考虑考虑 ultrafetch 了

ES2017 异步函数现已正式可用

ES2017异步函数现已正式可用

Fetch还是Axios——哪个更适合HTTP请求？

一文掌握Axios：前后端数据交互竟如此简单

Promise 对象一网打尽

盘点JavaScript中asyncawait知识

前端基础进阶（十五）：详解 Promise对象

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐