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)
},
相关文章
|
1月前
|
前端开发 JavaScript
Promise、async和await
Promise、async和await
19 0
|
1月前
|
JSON 前端开发 JavaScript
【JavaScript技术专栏】JavaScript异步编程:Promise、async/await解析
【4月更文挑战第30天】JavaScript中的异步编程通过Promise和async/await来解决回调地狱问题。Promise代表可能完成或拒绝的异步操作,有pending、fulfilled和rejected三种状态。它支持链式调用和Promise.all()、Promise.race()等方法。async/await是ES8引入的语法糖,允许异步代码以同步风格编写,提高可读性和可维护性。两者结合使用能更高效地处理非阻塞操作。
|
4天前
|
JSON 前端开发 JavaScript
ES6引入Promise和async/await解决异步问题
【6月更文挑战第12天】ES6引入Promise和async/await解决异步问题。Promise处理异步操作,有pending、fulfilled、rejected三种状态,支持链式调用和并行处理。async/await是基于Promise的语法糖,使异步代码更同步化,提高可读性。两者都是处理回调地狱的有效工具,开发者应根据需求选择合适的方式。
22 3
|
16天前
|
前端开发
Promise 和 Async/await 在实际开发中的应用场景
Promise 和 Async/await 在实际开发中的应用场景
|
1月前
|
前端开发
Promise和async/await之间有什么区别
Promise与async/await是异步编程的两种模式。Promise使用.then()和.catch()处理回调,语法较复杂,易出现回调地狱;而async/await提供更清晰的顺序代码,使用try/catch进行错误处理,使异步操作更易读、易维护。Promise在控制流和错误堆栈方面较为灵活,但定位错误难,而async/await自动等待、线性控制流,错误堆栈清晰。两者各有优势,选择取决于具体需求和偏好。
|
1月前
|
前端开发 JavaScript
在JavaScript中,回调函数、Promise和async/await这三种异步处理机制的优缺点
JavaScript的异步处理包括回调函数、Promise和async/await。回调函数简单易懂,但可能导致回调地狱和错误处理困难。Promise通过链式调用改善了这一情况,但仍有回调函数需求和学习成本。async/await提供同步风格代码,增强可读性和错误处理,但需ES8支持,不适用于并发执行。根据项目需求选择合适机制。
|
1月前
|
前端开发 JavaScript Java
Promise, async, await实现异步编程,代码详解
Promise, async, await实现异步编程,代码详解
25 1
|
1月前
|
前端开发 JavaScript
如何处理 JavaScript 中的异步操作和 Promise?
如何处理 JavaScript 中的异步操作和 Promise?
20 1
|
1月前
|
前端开发 JavaScript
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
33 4
|
1月前
|
前端开发 JavaScript 开发者
JavaScript 中的异步编程:Promise 和 Async/Await
在现代的 JavaScript 开发中,异步编程是至关重要的。本文将介绍 JavaScript 中的异步编程概念,重点讨论 Promise 和 Async/Await 这两种常见的处理异步操作的方法。通过本文的阐述,读者将能够更好地理解和应用这些技术,提高自己在 JavaScript 开发中处理异步任务的能力。