针对vue的axios封装的 promise与 await
async changeSise() { let p = await new Promise(function(resolve, reject) { SourceMirror.fourColortInfo().then(res => { if (res.data.code == 200) { resolve(res.data.data) } else { reject(res.data.msg) } }); }); console.log('四色p', p); }
先来ES6的promise的写法
eg1
function text() { return new Promise(function(resolve, reject) { var time = Math.random() * 2; console.log(time); //做一些异步操作 setTimeout(function() { if (time > 1) { console.log('执行完成'); resolve('resolve'); } else { console.log('执行失败'); reject('reject'); } }, 2000); }); } text().then((res) => { console.log(res) }).catch((err) => { console.log(err) })
var p = new Promise(function(resolve, reject){ var time = Math.random()*2; console.log(time); //做一些异步操作 setTimeout(function(){ if(time > 1){ console.log('执行完成'); resolve('resolve'); }else{ console.log('执行失败'); reject('reject'); } }, 2000); }); p.then((res)=>{ console.log(res) }).catch((err)=>{ console.log(err) })
ES7的async/await几种写法
eg1
async function text(){ return new Promise(function(resolve, reject){ var time = Math.random()*2; console.log(time); //做一些异步操作 setTimeout(function(){ if(time > 1){ resolve('resolve'); }else{ reject('reject'); } }, 2000); }); } async function dq(){ try{ var data = await text(); console.log(data); }catch(e){ console.log(e) } /**如果只写这句,不写上面的try,catch,当time<1时,直接会reject报错 为了能够提取到reject的错误,得在catch里面拿 console.log(await text()) **/ } dq()
eg2
var p = new Promise(function(resolve, reject){ var time = Math.random()*2; console.log(time); //做一些异步操作 setTimeout(function(){ if(time > 1){ console.log('执行完成'); resolve('resolve'); }else{ console.log('执行失败'); reject('reject'); } }, 2000); }); async function te(){ await p; } async function es(){ try{ await te() }catch(e){ console.log(e) } } es()
总结:
ES6>promise相对简单,没有什么多说的,直接把resolve看做成success的回调,在then里面调用,reject看做成err的回调,在catch里面调用
p.then((res)=>{ console.log(res) },er=>{ console.log("er",er) }).catch((err)=>{ console.log("catch",err) })
当出现这种情况的时候,错误只会出现在er处,不会出现在catch处
下来科普下链式调取业务场景以及写法
比如我们平常经常遇到的一种情况:
网站中需要先获取用户名,然后再根据用户名去获取用户信息。这里获取用户名getUserName()和获取用户信息getUser()都是调用接口的异步请求。在获取用户信息之前,需要先获得用户名。也就是说getUser依赖于getUserName的状态。
function getUserName(username) { let data = username; return new Promise((resolve, reject) => { setTimeout(resolve(data), 4000); }) } function getUser(username) { console.log(username);//man let data = { id: 1, username: username, gender: 'male' } return new Promise((resolve, reject) => { if (username) { setTimeout(resolve(data), 2000); } else { reject('err'); } }) } getUserName('man').then(username => { console.log(username);//man return getUser(username); }) .then(user => { console.log(user);//{id: 1, username: "man", gender: "male"} }) .catch(err => { console.log(err); })
eg2:vue中实践
点击按钮事件getFaceResult()先提交getList()请求获取地域然后取回值传到
geiMoney()里面获取到值的链式结果,//注释的为以前内嵌的老写法不是链式
import { meny1,meny2 } from "../../mock/index.js"; 当前页面 getFaceResult() { this.getList().then((res)=>{ return this.geiMoney(res) // this.geiMoney(res).then((rese)=>{ // console.log(rese) // }); }).then((rese)=>{ console.log(rese)//打印的为money的值 }); }, geiMoney(){ return this.$post('money.json') }, getList(){ return this.$post('area.json') }
mock.js
const Mock = require('mockjs'); var data = [ {name:'奔1驰',id:'1',ctime:new Date}, {name:'宝马',id:'2',ctime:new Date}, ]; var meny = Mock.mock('www.bai.com/index.json','post',data) var data1 = [ {id:'1',pro:'深圳',area:'广州'} ] var meny1 = Mock.mock('www.bai.com/area.json','post',data1) var data2 = [ {id:'1',money:'50'} ] var meny2 = Mock.mock('www.bai.com/money.json','post',data2) export default {meny,meny1,meny2};
重点
async/await改进上面的then链式调动
async getFaceResult() { try { let area = await this.getList(); console.log(area[0].pro); if(area[0].pro == '深圳'){ let money = await this.geiMoney(area.id) console.log(money); } } catch (error) { console.log(error) } geiMoney(){ return this.$post('money.json') }, getList(){ return this.$post('area.json') }
总结:getFaceResult外使用async,声明异步;let area = await this.getList();这一步的时候如果只是let area = this.getList();的话,那么area是一个promise对象;加了个await之后,直接变为同步,这样最大的优点不仅在于可以把promise异步写法变同步,最重要的为可以明确的处理每一步异步请求的错误值的处理