async/await的用法

es6 promise 静态方法+.all等待其他函数执行完再执行_心动止于人海。的博客-CSDN博客

https://segmentfault.com/a/1190000015488033

https://segmentfault.com/a/1190000019006291?utm_source=tag-newest

函数回调

async created() {this.companyDescList = await this.getCityOptions();},//城市换接口getCityOptions() {return new Promise((resolve, reject) => {let params = {haveProv: 1, // 包含全省};this.$http({url: this.$http.adornUrl("/assessment/tassexcanncumulative/getCityOptions"),method: "get",params: this.$http.adornParams(params),}).then(({ data }) => {if (data && data.code == 0) {let arr = data.list || [];resolve(arr);} else {reject([]);}});});},return this.$http({url: this.$http.adornUrl("/indicator/factors/getListAll"),method: "get",params: this.$http.adornParams({yearMonth: time,cityName: city ? city : "",indicatorName: indicator ? indicator : "",lineName: line ? line : "",userDeptName: dept ? dept : "",}),})this.$refs.super1.getDataList(this.dataForm.yearMonth,cityName,indicator,lineType,department).then((res) => {console.log(res, "aaaaaa");});

介绍:

同步代码编写方式： Promise使用then函数进行链式调用，一直点点点，是一种从左向右的横向写法；async/await从上到下，顺序执行，就像写同步代码一样，更符合代码编写习惯；

多个参数传递： Promise的then函数只能传递一个参数，虽然可以通过包装成对象来传递多个参数，但是会导致传递冗余信息，频繁的解析又重新组合参数，比较麻烦；async/await没有这个限制，可以当做普通的局部变量来处理，用let或者const定义的块级变量想怎么用就怎么用，想定义几个就定义几个，完全没有限制，也没有冗余工作；

同步代码和异步代码可以一起编写： 使用Promise的时候最好将同步代码和异步代码放在不同的then节点中，这样结构更加清晰；async/await整个书写习惯都是同步的，不需要纠结同步和异步的区别，当然，异步过程需要包装成一个Promise对象放在await关键字后面；

async/await是对Promise的优化： async/await是基于Promise的，是进一步的一种优化，不过在写代码时，Promise本身的API出现得很少，很接近同步代码的写法；

async函数返回类型为Promise对象： 这是和普通函数本质上不同的地方，也是使用时重点注意的地方；
（1）return newPromise();这个符合async函数本意；
（2）return data;这个是同步函数的写法，这里是要特别注意的，这个时候，其实就相当于Promise.resolve(data);还是一个Promise对象，但是在调用async函数的地方通过简单的=是拿不到这个data的，因为返回值是一个Promise对象，所以需要用.then(data => { })函数才可以拿到这个data；
（3）如果没有返回值，相当于返回了Promise.resolve(undefined);

如果async函数中是return一个值，这个值就是Promise对象中resolve的值；
如果async函数中是throw一个值，这个值就是Promise对象中reject的值。

async function imAsync(num) {if (num > 0) {return num // 这里相当于resolve(num)} else {throw num // 这里相当于reject(num)}
}imAsync(1).then(function (v) {console.log(v); // 1
});// 注意这里是catch
imAsync(0).catch(function (v) {console.log(v); // 0
})

4）无等待 联想到Promise的特点，在没有await的情况下执行async函数，它会立即执行，返回一个Promise对象，并且绝对不会阻塞后面的语句，这和普通返回Promise对象的函数并无二致；

5）await不处理异步error： await是不管异步过程的reject(error)消息的，async函数返回的这个Promise对象的catch函数负责统一抓取内部所有异步过程的错误；async函数内部只要有一个异步过程发生错误，整个执行过程就中断，这个返回的Promise对象的catch就能抓取到这个错误；

5）async函数的执行： async函数执行和普通函数一样，函数名带个()就可以了，参数个数随意，没有限制，也需要有async关键字；只是返回值是一个Promise对象，可以用then函数得到返回值，用catch抓整个流程中发生的错误；

await关键字

1）await只能在async函数内部使用：不能放在普通函数里面，否则会报错；

2）await关键字后面跟Promise对象：在Pending状态时，相应的协程会交出控制权，进入等待状态，这是协程的本质；不加 return

3）await是async wait的意思： wait的是resolve(data)的消息，并把数据data返回，比如下面代码中，当Promise对象由Pending变为Resolved的时候，变量a就等于data，然后再顺序执行下面的语句console.log(a)，这真的是等待，真的是顺序执行，表现和同步代码几乎一模一样；

async function testSync() {const datas= await new Promise((resolved, rejected) => {setTimeout(() => {resolved("async await test...");}, 1000);});console.log(datas);}testSync();//async await test...// async/await方式调用
function sayHi(name) {return new Promise((resolved, rejected) => {setTimeout(() => {resolved(name);}, 2000)})
}//async function 声明用于定义一个返回 AsyncFunction 对象的异步函数。
异步函数是指通过事件循环异步执行的函数，它会通过一个隐式的 Promise 返回其结果。async function sayHi_async(name) {const sayHi_1 = await sayHi(name)console.log(`你好， ${sayHi_1}`)const sayHi_2 = await sayHi('李四')console.log(`你好， ${sayHi_2}`)const sayHi_3 = await sayHi('王二麻子')console.log(`你好， ${sayHi_3}`)
}sayHi_async('张三')
// 你好， 张三
// 你好， 李四
// 你好， 王二麻子vue:
import Api from "../../utils/http";async search() {// api调用let datas=await Api.get("/refer",{name: this.searchValue},null);this.$store.state.common.searchValue = this.searchValue;},

Vuex结合 async/await 优雅的管理接口请求

async 函数返回一个 Promise 对象

async 函数内部 return 返回的值。会成为 then 方法回调函数的参数。

async function  f() {return 'hello world'
};
f().then( (v) => console.log(v)) // hello worldasync setMapOption () {await this.$http({url: this.$http.adornUrl(this.apiName + '/bgtPlanTotal'),method: 'post',params: this.$http.adornParams({'yearMonth': this.filterMonth})}).then(({ data }) => {})
}//添加任务async TaskList({ commit, state }, param) { //commit 直接调用mutation里面的方法let res = await TaskList(param);console.log(res.data, '任务列表')commit('TaskList', res.data.Result)return res.data.Result;//返回值相当于Promise对象中resolve的值},// try/catch的实现
async function updateUserInfo (userId) {try {const res = await fetchUser(userId);if (res.ok) {doSuccessAction(res.json());} else {doWarnAction(res.json());}} catch (error) {if (error instanceof TypeError) {toast.show("Network Error");console.error("fetch operation error: ", error.message);}}
}

用async/ await来发送异步请求，从服务端获取数据，等待获取数据，然后处理数据。

vue中用async/await 来处理异步 - 简书用async/await处理异步回调

methods: {/页面可以用then回调 actions.js里面加return  Vuex
//添加任务async TaskList({ commit, state }, param) { //commit 直接调用mutation里面的方法let res = await TaskList(param);console.log(res.data, '任务列表')commit('TaskList', res.data.Result)return res.data.Result;},//页面就可以用回调获取数据(Vue页面)
//任务列表 GetTaskList //mapActions 函数  TaskList //mapState 初始数据this.GetTaskList({Page: this.currentPage,Total: this.pageSize,SearchTxt: "" }).then(data =>{ //成功后回调this.total = data[0].Allcount;console.log(data,'回调 data=this.TaskList');console.log(this.TaskList,'this.TaskList')})
//
//GetTaskList actions 函数
async generateData() { //另写一个函数let datas = await this.GetTaskList({Page: this.currentPage, //页码Total: this.pageSize, //显示条数SearchTxt: "" //搜索条件（可选填）})console.log(datas,'datas');// this.datalist = _result.data;
},async generateData() {let datas = await this.$store.dispatch("UpgradeTaskmanage/TaskList", {Page: this.currentPage, //页码Total: this.pageSize, //显示条数SearchTxt: "" //搜索条件（可选填）});console.log(datas,'datas');// this.datalist = _result.data;},
// 等待getProductslist() 方法执行后返回数据给_result，然后再对返回的数据做更多的操作。回调：async getNumber() {// 在 actions 函数里 await 也行 看具体需求   此例只作为演示 await 调用const datas = await this.$store.dispatch(`${moduleName}/getContractNumber`)this.contractInfo.fileNo = datas.fileNo},async login() {
//         let loginInfo = await this.http.post('/api/login/doLogin', this.loginInfo)
//         // 提交mutation 保存token
//         this.$store.commit('updateToken', token)
//         setTimeout(() => {
//             this.$router.push('/')
//         }, 300)
//     }
// }// 获取数据字典
async function getInitData({commit, state}, params) {const num = await getContractNumber()return new Promise((resolve, reject) => {axios.get(INTERFACE.GET_INIT_DATA).then((data) => {commit('SET_INIT_DATA', {data})   // 改变state.initDataresolve(data.data)}).catch((err) => {window.Alert(err)  // 全局错误提示})})
}

async 函数返回的 Promise 对象，必须等到内部所有的 await 命令的 Promise 对象执行完，才会发生状态改变

也就是说，只有当 async 函数内部的异步操作都执行完，才会执行 then 方法的回调。

const delay = timeout => new Promise(resolve=> setTimeout(resolve, timeout));
async function f(){await delay(1000);await delay(2000);await delay(3000);return 'done';
}
f().then(v => console.log(v)); // 等待6s后才输出 'done'async function timeout() {return 'hello world'
}
timeout().then(result => {console.log(result);
})
console.log('虽然在后面，但是我先执行');

async/await的用法相关推荐

javascript中async await的用法
2019独角兽企业重金招聘Python工程师标准>>> async和await必须成对出现,示例: function file2txtArr(file) {var fr = new ...
async await 的用法
async函数返回一个 Promise 对象,可以使用then方法添加回调函数.当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句. 下面代码是一个获取股票 ...
C# WPF 关于async/await异步用法
写数据传给前台的时候老是卡死,发现用了这个方法也不行,然后发现要再最上层套上Task.Run()才行,在此记录下. 首先把流程源码放出来这些代码也包含了一个定时器和记录前台显示,每天几点执行一次,需 ...
python 协程 async/await
1.前言 1.1 计算密集型.IO密集型 python因为自身的GIL的问题导致并发不能像java和C一样,但并不是说Python不能实现并发.常见的有两种: 计算密集型 IO密集型计算密集型计算 ...
Promise async/await的理解和用法
Promise && async/await的理解和用法为什么需要promise(承诺)这个东西在之前我们处理异步函数都是用回调这个方法,回调嵌套的时候会发现阅读性和调试的 ...
async 与 await 的用法详解
文章出自个人博客https://knightyun.github.io/2019/08/02/js-async-await,转载请申明 async 概念用于声明异步函数,返回值为一个 Promise ...
async和await的用法
一.async&await用法 async 表示函数里有异步操作, await 表示紧跟在后面的表达式需要等待结果. 同 Generator 函数一样,async 函数返回一个 Promise ...
vue中异步函数async和await的用法
先说一下async的用法,它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行. 写一个async 函数 as ...
理解异步函数async和await的用法
定义 async作为一个关键字放在函数前面,表示该函数是一个异步函数,异步函数意味着该函数的执行不会阻塞后面代码的执行:而 await 用于等待一个异步方法执行完成: async/await的作用就是 ...

async/await的用法

async/await的用法相关推荐

最新文章

热门文章