axios,async,promise,await的简单理解与使用

简介: 一.Promise解决的是将“异步过程“变成“同步过程”1.Promise 是一个构造函数⚫ 我们可以创建 Promise 的实例 const p = new Promise()⚫ new 出来的 Promise 实例对象,代表一个异步操作2. Promise.prototype 上包含一个 .then() 方法注:prototype表示该函数的原型,也表示一个类的成员的集合。 在通过new创建一个类的实例对象的时候,prototype对象的成员都成为实例化对象的成员。 2、在new实例化后,其成员被实例化,实例对象方可调用。

axios,async,promise,await的简单理解与使用



文章目录


一.Promise解决的是将“异步过程“变成“同步过程”

二.async代表该方法下面会调用promise请求

三.await就是“等“的意思,在实际需要调用promise的方法前添加,如果调用某个方法的返回值是promise实例,则前面可以添加await,await只能用在被async修饰的方法中

四.调用axios方法得到的返回值是promise对象

五.解构赋值的时候,使用:进行重命名


一.Promise解决的是将“异步过程“变成“同步过程”


1.Promise 是一个构造函数


⚫ 我们可以创建 Promise 的实例 const p = new Promise()


⚫ new 出来的 Promise 实例对象,代表一个异步操作


2. Promise.prototype 上包含一个 .then() 方法


注:prototype表示该函数的原型,也表示一个类的成员的集合。 在通过new创建一个类的实例对象的时候,prototype对象的成员都成为实例化对象的成员。 2、在new实例化后,其成员被实例化,实例对象方可调用。


⚫ 每一次 new Promise() 构造函数得到的实例对象,


⚫ 都可以通过原型链的方式访问到 .then() 方法,例如 p.then()


(1) .then() 方法用来预先指定成功和失败的回调函数


⚫ p.then(成功的回调函数,失败的回调函数)


⚫ p.then(result => { }, error => { })


⚫ 调用 .then() 方法时,成功的回调函数是必选的、失败的回调函数是可选的


(2).then() 方法的特性


如果上一个 .then() 方法中返回了一个新的 Promise 实例对象,则可以通过下一个 .then() 继续进行处理。通

过 .then() 方法的链式调用,就解决了回调地狱的问题


3.通过 .catch 捕获错误


如果不希望前面的错误导致后续的 .then 无法正常执行,则可以将 .catch 的调用提前,示例代码如下:


0bcc96c04cb249dd850e44151fce339f.png


4.Promise.all() 方法


Promise.all() 方法会发起并行的 Promise 异步操作,等所有的异步操作全部结束后才会执行下一步的 .then操作(等待机制)。示例代码如下:


36fdc51edf8b46d1ac13269629f4353b.png


4.Promise.race() 方法


Promise.race() 方法会发起并行的 Promise 异步操作,只要任何一个异步操作完成,就立即执行下一步的

.then 操作(赛跑机制)。示例代码如下


20bbd617dc614071acf9939f7b630402.png


二.async代表该方法下面会调用promise请求


三.await就是“等“的意思,在实际需要调用promise的方法前添加,如果调用某个方法的返回值是promise实例,则前面可以添加await,await只能用在被async修饰的方法中


四.调用axios方法得到的返回值是promise对象


例子:


axios({
// 请求方式
method: ‘GET/POST’,
url: ‘请求的地址’,
// URL 中的查询参数
params: {
id: 1
}
}).then(function (result) {
console.log(result)
})


五.解构赋值的时候,使用:进行重命名


(1)调用axios之后,使用async+await进行简化


(2)使用解构赋值,从axios封装的大对象中,把data属性解构出来


(3)把解构出来的data属性,使用冒号进行重命名,一般都重命名为{data:res}

axios在请求到数据之后,会在真正的数据之外,套了一层壳。会得到6个属性,其中data才是真正的数据


05a62687b51f4fb88dd295d6e3d3f4bc.png


解构例子:


async fangFaMing() {
const { data: res } = await axios.get(‘请求地址’)
console.log(res)
},
目录
相关文章
|
3月前
|
前端开发
使用 async/await 结合 try/catch 处理 Promise.reject()抛出的错误时,有什么需要注意的地方?
使用 async/await 结合 try/catch 处理 Promise.reject()抛出的错误时,有什么需要注意的地方?
154 57
|
6月前
|
前端开发 JavaScript 开发者
Async 和 Await 是基于 Promise 实现
【10月更文挑战第30天】Async和Await是基于Promise实现的语法糖,它们通过简洁的语法形式,借助Promise的异步处理机制,为JavaScript开发者提供了一种更优雅、更易于理解和维护的异步编程方式。
74 1
|
6月前
|
前端开发
如何使用async/await解决Promise的缺点?
总的来说,`async/await` 是对 Promise 的一种很好的补充和扩展,它为我们提供了更高效、更易读、更易维护的异步编程方式。通过合理地运用 `async/await`,我们可以更好地解决 Promise 的一些缺点,提升异步代码的质量和开发效率。
160 64
|
6月前
|
前端开发 JavaScript
async/await和Promise在性能上有什么区别?
性能优化是一个综合性的工作,除了考虑异步模式的选择外,还需要关注代码的优化、资源的合理利用等方面。
188 63
|
6月前
|
JSON 前端开发 JavaScript
浅谈JavaScript中的Promise、Async和Await
【10月更文挑战第30天】Promise、Async和Await是JavaScript中强大的异步编程工具,它们各自具有独特的优势和适用场景,开发者可以根据具体的项目需求和代码风格选择合适的方式来处理异步操作,从而编写出更加高效、可读和易于维护的JavaScript代码。
77 1
|
7月前
|
前端开发 JavaScript UED
深入了解JavaScript异步编程:回调、Promise与async/await
【10月更文挑战第11天】深入了解JavaScript异步编程:回调、Promise与async/await
67 0
|
前端开发 JavaScript
如何处理 JavaScript 中的异步操作和 Promise?
如何处理 JavaScript 中的异步操作和 Promise?
101 1
|
前端开发 JavaScript
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
161 4
|
前端开发 JavaScript 开发者
JavaScript 中的异步编程:Promise 和 Async/Await
在现代的 JavaScript 开发中,异步编程是至关重要的。本文将介绍 JavaScript 中的异步编程概念,重点讨论 Promise 和 Async/Await 这两种常见的处理异步操作的方法。通过本文的阐述,读者将能够更好地理解和应用这些技术,提高自己在 JavaScript 开发中处理异步任务的能力。

热门文章

最新文章

  • 1
    Vue中的axios深度探索:从基础安装到高级功能应用的全面指南
    191
  • 2
    JavaScript 使用axios库发送 post请求给后端, 给定base64格式的字符串数据和一些其他参数, 使用表单方式提交, 并使用onUploadProgress显示进度
    792
  • 3
    若依修改,若依如何发送请求---王清江07,axios的请求在request.js文件中,若依发送GET请求,必须用param
    389
  • 4
    axios发送post请求,如何接受和返回一个axios的字段,解决bug的方法,困难的事情先从简单做起,先从发送一个axios的post请求做起,解决方法查别人的资料,查看F12看network就行
    93
  • 5
    文本,前后端数据交互,简单请求,如何去给data数据赋值,在mounted()里赋值,利用axios发送的请求,res就是数据集,就是后端的数据,this.users = res.data.data
    75
  • 6
    Request failed with status code 400,使用axios.post要发送参数,认真比对原项目,看看有没有忘记什么?
    184
  • 7
    vue3 在 watchEffect 里中断未完成的 axios 请求(只保留最后一次请求的方法---连续点击查询按钮的优化)
    207
  • 8
    前后端数据交互.js文件的axios的写法,想要往后端发送数据,页面注入API,await的意思是同步等待服务器数据,并返回,axios注入在其他页面,其他页面调用的时候,同步作用
    90
  • 9
    前后端数据交互,API风格组合式API和选项式API,setup是一个标识,组合式编写的意思,使定义count.value的值自增的写法,组合式API使用axios的写法,ref定义响应数据写法
    64
  • 10
    网页设计,若依项目修改(It must be done)02------axios封装后发get请求,axios请求的位置在呢?
    78