Vue的async和wait

479 阅读2分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

async的用法

async关键字是用来修饰Vue中的函数的,他的作用是声明此函数是一个异步函数

async 函数返回的是一个promise 对象,如果要获取到promise 返回值,我们应该用then 方法

async function timeout() {
​
    return 'hello world'
​
}
​
timeout().then(result => {
​
    console.log(result);
​
})
​
console.log('虽然在后面,但是我先执行');

控制台中的Promise 有一个resolved,这是async 函数内部的实现原理。如果async 函数中有返回一个值 ,当调用该函数时,内部会调用Promise.solve() 方法把它转化成一个promise 对象作为返回,但如果timeout 函数内部抛出错误呢? 那么就会调用Promise.reject() 返回一个promise 对象,如果函数内部抛出错误, promise 对象有一个catch 方法进行捕获。

vue的await用法是什么

await 关键字只能放到async 函数里面

在vue中,await是等待的意思,await关键字只能放在async函数里,await配合async一起使用,相当于把异步函数变成了同步,await会等待后面表达式的返回结果之后才执行下一步。

Vue中的fetch

Fetch API是新的ajax解决方案 Fetch会返回Promise
fetch不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest对象。-
fetch(url, options).then()

一、fetch API 中的 HTTP 请求

fetch(url, options).then()
HTTP协议,它给我们提供了很多的方法,如POST,GETDELETEUPDATE,PATCH和PUT
默认的是 GET 请求
需要在 options 对象中 指定对应的 method method:请求使用的方法
post 和 普通 请求的时候 需要在options 中 设置 请求头 headers 和 body
二、fetchAPI 中 响应格式

用fetch来获取数据,如果响应正常返回,我们首先看到的是一个response对象,其中包括返回的一堆原始字节,这些字节需要在收到后,需要我们通过调用方法将其转换为相应格式的数据,比如 JSON , BLOB 或者TEXT 等等。

创作不易,帮忙点个赞吧~~~~~~