注：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>