async,await,fetch,ajax, fetch,axios区别

最新推荐文章于 2025-09-15 10:47:55 发布
原创 最新推荐文章于 2025-09-15 10:47:55 发布 · 2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了async和await如何联合使用以替代Promise的then和catch方法，将异步代码变为同步阻塞式执行。此外还对比了ajax、fetch、axios等异步操作方式的特点。
部署运行你感兴趣的模型镜像

其实async 和await联合起来使用相当于替代了Promise的then和catch方法，将async低昂一的函数里面的代码由异步变成了同步阻塞式，只有当await定义的行数执行完了代码才会继续往下执行，同时await还有有返回值，他的返回值在上面这个例子中就是resolve

Promise：轻松实现多个异步函数调用。
ajax：异步调用
fetch：类似于ajax的异步操作
async&await ：相当于替代了Promise的then和catch方法
axios：一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

参考链接：
https://www.zhihu.com/question/265744952/answer/298566500
https://blog.youkuaiyun.com/wang839305939/article/details/75505444
https://www.kancloud.cn/yunye/axios/234845

您可能感兴趣的与本文相关的镜像

AutoGPT

AutoGPT

AI应用

AutoGPT于2023年3月30日由游戏公司Significant Gravitas Ltd.的创始人Toran Bruce Richards发布,AutoGPT是一个AI agent（智能体），也是开源的应用程序，结合了GPT-4和GPT-3.5技术，给定自然语言的目标，它将尝试通过将其分解成子任务，并在自动循环中使用互联网和其他工具来实现这一目标

ajax、axios、fetch的区别
qq_46015513的博客
09-17 797
（1）AJAX Ajax 即“AsynchronousJavascriptAndXML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。它是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。其缺点如下： 本身是针对MVC编程，不符合前端MVVM的浪潮 .
前端请求进化史 -- 对比XHR、AJAX、Fetch、Axios
lxs1660275788的博客
05-05 1316
本文系统梳理了前端请求技术的演进历程，涵盖XHR、Fetch API、Axios、Server Action等内容，揭示了每一次技术跃迁背后的核心驱动力
ajax、axios、fetch区别
01-03
ajax、axios、fetch区别 ajax $.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () {}, error: function () {} }); 优缺点： 本身是针对MVC的编程,不符合现在前端MVVM的浪潮 基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案 JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务） axios axi
ajax fetch axios
weixin_45346239的博客
07-04 290
ajax fetch axios
【新手指南】async/await与Axios的用法
最新发布
深耕CV
09-15 1046
这篇文章详细讲解了JavaScript中async/await和axios的使用方法。主要介绍了：1）async定义异步函数，await等待Promise结果；2）axios作为HTTP请求库返回Promise，适合与await配合使用；3）外层函数必须加async才能使用await；4）函数内部调用axios是正常操作而非嵌套。文章通过外卖点餐等生活化比喻，帮助初学者理解异步编程概念，并提供了实际代码示例说明运行流程。最后建议读者动手实践，安装axios尝试API调用。
async/await的基本用法
Mint周的文章
10-25 183
/* async/await 处理异步操作： async函数返回一个Promise实例对象 await后面可以直接跟一个 Promise实例对象 */ axios.defaults.baseURL = 'http:localhost:3000'; axios.get('adata').then(function(ret){ console.log(ret.data) }) async function qu...
使用async/await解决fetch
bl_ack233的博客
08-11 2240
返回的是一个promise实例对象，所以它的后面可以跟.then，但是这个.then中触发的成功回调或者失败回调仅仅是判断这个请求是否连接到服务器，并不会返回服务器发送回来的数据。得到一个新的promise，并且return出去，紧跟后面的.then就可以采用链式.then的方法再次获得成功的回调(服务器返回的数据在里面)。当然也要等待它返回一个成功态promise，并将其赋值给data，此时的data就是。这种写法可以使用同步执行的思考来看待这个请求，对于promise的理解更深一步加强。........
前端请求全面解析：AJAX、Axios 与 Fetch 的使用详解与代码示例
二进制忍者的博客
03-13 3306
适合了解底层原理，但代码结构较为复杂，较少在新项目中直接使用。Fetch API：语法简洁、基于 Promise，适用于现代浏览器，但需要注意对错误状态的手动处理。Axios：功能丰富、支持拦截器及更多高级特性，适合大型项目和复杂需求。根据项目需求和团队习惯，选择合适的请求方式可以大大提升开发效率和代码可维护性。希望本文的详解与代码示例能够为你在前端请求的开发实践中提供参考和帮助！快动手试试这些代码示例，体验不同请求方式带来的开发便利吧！
React ajax请求 及axios、pubsub、fetch使用
YuLong的博客
10-20 2186
文章目录React ajax前置说明常用ajax请求库axios消息订阅-发布机制Fetch案例——github用户搜索 React ajax 前置说明 React 本身只关注于界面, 并不包含发送ajax请求的代码 前端应用需要通过ajax请求与后台进行交互(json数据) react 应用中需要集成第三方ajax库(或自己封装) 常用ajax请求库 1、jQuery: 比较重, 如果需要另外引入不建议使用 2、axios: 轻量级, 建议使用 封装XmlHttpRequest对象的ajax pr
详解网络请求ajax、基于jQuery的ajax、promise、基于Promise发送Ajax请求、fetch、axios、async 和 await（接口调用）
su_yun的博客
01-05 345
详解网络请求ajax、基于jQuery的ajax、promise、基于Promise发送Ajax请求、fetch、axios、async 和 await（接口调用）
最新最全的前端面试题集锦之 Ajax、Fetch、Axios 篇
XH_jing的博客
08-09 3805
该内容主要整理关于 Axios 的相关面试题，其他内容面试题请移步至 2021 最新最全的前端面试题集锦 查看。 目录一、Ajax 相关面试题1、概念2、作用3、创建 Ajax4、Ajax 状态和 HTTP 状态码5、Ajax 中常用的属性和方法6、思考：post 和 get 有什么区别二、Axios 相关面试题1、axios 原理2、axios 的特点有哪些？3、axios 有哪些常用方法？3、一次并发的请求 axios.all([])4、说下你了解的axios相关配置属性？三、Fetch 相关面.
ajax、fetch和axios的比较
qq_43539854的博客
05-30 5473
AJAX、Fetch、axios AJAX AJAX可以在不更新全局的情况下更新局部页面。通过在与服务器进行数据交换，可以使网页实现异步更新。 AJAX的原理就是通过XHR对象来向服务器发起异步请求，从服务器获得数据，然后用JS来操作DOM更新页面。领导想找小李汇报一下工作，就委托秘书去叫小李，自己就接着做其他事情，直到秘书告诉他小李已经到了，最后小李跟领导汇报工作。Ajax请求数据流程与“领导想找小李汇报一下工作”类似，上述秘书就相当于XMLHttpRequest对象，领导相当于浏览器，响应数据相当于小
fetch axios async/await 接口调用
XiaoPan
06-11 507
fetch Fetch API fetch基本特性 相比Ajax更加简单地数据获取方式，功能更强大，更灵活，可以看作是传统Ajax升级版 一个基本地fetch请求很简单，如下： fetch(url) .then(function(response) { return response.text(); }) .then(function(data) { console.log(data); }); /* 第一个then方法获取数据，但不可以直接拿到数据 返回值是
【JS学习】async/await、Fetch API
Resemee_C的博客
06-10 983
async/await ES2017引入了async函数，使异步操作变得更加方便。 1、async函数返回的Promise对象会运行执行(resolve)异步函数的返回结果，或者如果异步函数抛出异常的话会运行拒绝(reject)。 2、async会把返回值传递给Promise.resolve( )。 async function testAsync(){ return "hello async"; } console.log(testAsync()); te
ajax，fetch，axios总结
qq_46448507的博客
07-27 155
ajax 这里讲解的是jquery中的ajax $.ajax({ type:'get',//请求的方式，get post url:''，请求地址 data:{ id:1, name:''lisi }//通常时post请求携带的参数 dataType:jsonp,//jquery中处理跨域的方式 或者是json 表示服务器返回的数据类型 success：function(data){ console.log(data)//成功时，后台返回的数据 } }) jquery中的ajax是
Fetch and await
weixin_40969472的博客
12-15 954
老朋友Ajax Promise Fetch API await/async 是 ES7 最重要特性之一，它是目前为止 JS 最佳的异步解决方案了。虽然没有在 ES2016 中录入，但很快就到来，目前已经在 ES-Next Stage 4 阶段。https://segmentfault.com/a/1190000007116715直接上例子，比如我们需要按顺序获取：产品数据=>用户数据=>评论数据老朋
Vue Day04 前后端交互
qq_39349116的博客
08-19 222
接口调用方式 原生ajax 基于jQuery的ajax fetch axios 异步 JavaScript的执行环境是「单线程」 所谓单线程，是指JS引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个，它会「阻塞」其他任务。这个任务可称为主线程 异步模式可以一起执行多个任务 JS中常见的异步调用 定时任何 ajax 事件函数 promise 主要解决异步深层嵌套的问题 promise 提供了简洁的API 使得异步操作更加容
await fetch 本地_如何正确合理使用 JavaScript async/await！
weixin_36018748的博客
01-22 1045
ES8 引入的 async/await 在 JavaScript 的异步编程中是一个极好的改进。它提供了使用同步样式代码异步访问 resoruces 的方式，而不会阻塞主线程。然而，它们也存在一些坑及问题。在本文中，将从不同的角度探讨 async/await，并演示如何正确有效地使用这对兄弟。前置知识async 作用是什么从 MDN 可以看出：async 函数返回的是一个 Promise 对象。a...
promise与 fetch、async/await
luemeon的博客
11-14 1062
包裹，这样传进promise.all的数据都是resolved状态的。catch方法返回的promise实例会被。在Promise里，执行顺序是。
promise async await使用在axios
02-28
### 使用 Axios 进行 HTTP 请求时正确运用 Promise、async 和 await #### 创建异步函数 在一个函数前加上 `async` 关键字表示此函数总是返回一个 Promise。这使得可以在函数内部使用 `await` 来等待 Promise 完成。 ```javascript async function fetchData(url) { try { const response = await axios.get(url); console.log(response.data); // 处理响应数据 } catch (error) { console.error('Error fetching data:', error); // 错误处理 } } ``` 这段代码定义了一个名为 `fetchData` 的异步函数，它接受 URL 参数并尝试通过 GET 方法发起请求[^4]。 #### 发起带有参数的 POST 请求 当需要发送带参数的数据到服务器时，可以构建一个包含配置的对象传递给 `axios.post()` 函数： ```javascript const postData = { title: 'foo', body: 'bar', userId: 1 }; async function submitPostRequest(url, postData) { try { const response = await axios.post(url, postData); console.log('Response from server:', response.data); } catch (error) { console.error('Failed to post data:', error); } } ``` 这里展示了如何利用 `await` 等待来自服务器对于 POST 请求的回复，并且能够捕获任何可能发生的错误[^5]。 #### 并发执行多个请求 有时希望并发地发出几个独立但相互关联的 API 调用。这时可以用 `Promise.all([])` 结合 `await` 来实现这一点: ```javascript async function fetchMultipleResources(urls) { try { const requests = urls.map(url => axios.get(url)); const responses = await Promise.all(requests); return responses.map(res => res.data); } catch (error) { throw new Error(`One or more requests failed ${error.message}`); } } // Example usage with an array of URLs. const resourceUrls = ['https://api.example.com/resource1', 'https://api.example.com/resource2']; fetchMultipleResources(resourceUrls).then(dataArray => console.log(dataArray)).catch(console.error); ``` 上述例子说明了怎样一次性启动所有的请求并将它们放入数组中交给 `Promise.all()` 去管理；一旦所有请求都完成，就会获得一组结果[^1]。 #### 遍历列表中的每一项并对其应用异步操作 如果想要遍历一个项目列表并对每一个项目执行一次网络请求，需要注意的是像 `.forEach()` 或者简单的循环语句并不支持直接配合 `await` 工作良好。因此推荐改用其他迭代方式如 `for...of` 循环来确保每次调用都能按顺序被执行而不会跳过任何一个未决状态的任务。 ```javascript async function processItems(items) { for (let item of items) { try { let result = await axios.get(item.url); console.log(`${item.name}:`, result.data); } catch (err) { console.warn(`Failed processing ${item.name}`, err); } } } ``` 在这个片段里，`processItems` 函数接收一个物品集合作为输入，依次访问每个项目的链接地址，并打印出相应的输出或警告信息[^2]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值