您的位置：首页 > Web前端 > Vue.js

vue中使用promise、gennerator、async/await

2019-03-08 17:01 323 查看

注：json格式请参考图片上格式。

一、代码

Promise封装axios

promiseAxios(url, method = 'get', data = {}) {
return new Promise((resolve, reject) => {
axios({
url,
method,
data
}).then(res => {
resolve(res.data)
}).catch(err => {
reject(err)
})
})
},

1.Promise http://es6.ruanyifeng.com/#docs/promise

peromiseFn() {
this.promiseAxios('json/demo3.json', 'get', this.param).then(res => {
console.log(res)
return this.promiseAxios('json/demo2.json', 'get', this.param)
}).then(res => {
console.log(res)
})
}

2.Generator http://es6.ruanyifeng.com/#docs/generator

// 定义
* generator() {
yield this.promiseAxios('json/demo1.json', 'get', this.param)
yield this.promiseAxios('json/demo2.json', 'get', this.param)
yield this.promiseAxios('json/demo3.json', 'get', this.param)
}
// 获取
generatorFn() {
let getData = this.generator()
getData.next().value.then(res => {
console.log(res.employees)
return getData.next().value
}).then(res => {
console.log(res.list)
return getData.next().value
})
.then(res => {
console.log(res.list)
})
}

3.Async/await http://es6.ruanyifeng.com/#docs/async

async asyncFn() {
// 使用解构，不了解的同学，请看 http://es6.ruanyifeng.com/#docs/destructuring
let [a, b, c] = await Promise.all([
this.promiseAxios('json/demo1.json', 'get', this.param),
this.promiseAxios('json/demo2.json', 'get', this.param),
this.promiseAxios('json/demo3.json', 'get', this.param)])
this.getPromiseData = a
this.getGeneratorData = b
this.getAsyncData = c
}

二、全部html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<style type="text/css">
p>span {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<section id="view" clock>
<p><span>promise</span>: {{getPromiseData}}</p>
<p><span>generator</span>: {{getGeneratorData}}</p>
<p><span>async</span>: {{getAsyncData}}</p>
</section>

<script type="text/javascript">
const vm = new Vue({
el: '#view',
data() {
return {
param: {},
getPromiseData: [],
getGeneratorData: [],
getAsyncData: []
}
},
mounted() {
this.peromiseFn()
this.asyncFn()
this.generatorFn()
},
methods: {
// 封装 axios
promiseAxios(url, method = 'get', data = {}) {
return new Promise((resolve, reject) => {
axios({
url,
method,
data
}).then(res => {
resolve(res.data)
}).catch(err => {
reject(err)
})
})
},
// 1. promise
peromiseFn() {
this.promiseAxios('json/demo3.json', 'get', this.param).then(res => {
console.log(res)
return this.promiseAxios('json/demo2.json', 'get', this.param)
}).then(res => {
console.log(res)
})
},

// 2. async ==> await
async asyncFn() {
let [a, b, c] = await Promise.all([this.promiseAxios('json/demo1.json', 'get', this.param), this.promiseAxios(
'json/demo2.json', 'get', this.param), this.promiseAxios(
'json/demo3.json', 'get', this.param)])
console.log(a, b, c)
this.getPromiseData = a
this.getGeneratorData = b
this.getAsyncData = c
},

// 3. generator
* generator() {
yield this.promiseAxios('json/demo1.json', 'get', this.param)
yield this.promiseAxios('json/demo2.json', 'get', this.param)
yield this.promiseAxios('json/demo3.json', 'get', this.param)
},
generatorFn() {
let getData = this.generator()
getData.next().value.then(res => {
console.log(res.employees)
return getData.next().value
}).then(res => {
console.log(res.list)
return getData.next().value
})
.then(res => {
console.log(res.list)
})
}
}
})
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航