vue中使用promise、gennerator、async/await

Z时代
2024-01-10
分类：综合

vue

注：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.Promisehttp://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.Generatorhttp://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/awaithttp://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>