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 的调用提前，示例代码如下：

4.Promise.all() 方法

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

4.Promise.race() 方法

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

.then 操作（赛跑机制）。示例代码如下

二.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才是真正的数据

解构例子：

async fangFaMing() {
const { data: res } = await axios.get(‘请求地址’)
console.log(res)
},