js中的promise使用笔记

<template>
    <div>
        <el-button @click="testAwait">测试await</el-button>
        <el-button @click="testPromise">测试promise</el-button>
    </div>
</template>

<script>
import axios from "axios";

export default {
    name: "promise",
    data() {
        return {};
    },
    created() {},
    mounted() {},
    methods: {
        async testAwait() {
            await this.ajax1();
            await this.ajax2();
        },
        testPromise() {
            this.ajax3().then(res => {
                console.log(res);
                return this.ajax4();
            }).then(res => {
                console.log(res);
                return this.ajax5();
            }).then(res => {
                console.log(res);
            }).catch(err => {
                console.log(err);
            });
        },
        async ajax1() {
            console.log(111);
            await axios({
                url: "http://demo.leansoftware.cn:30053/api/history-process-instance/queryscreen",
                method: "get",
            }).then(res => {
                console.log(111111);
                console.log(res);
            }).catch(e => {
                console.log(e);
            });
        },
        async ajax2() {
            console.log(222);
            await axios({
                url: "http://demo.leansoftware.cn:30053/api/history-process-instance/queryscreen",
                method: "get",
            }).then(res => {
                console.log(222222);
                console.log(res);
            }).catch(e => {
                console.log(e);
            });
        },
        async ajax3() {
            return new Promise((resolve, reject) => {
                console.log(333);
                axios({
                    url: "http://demo.leansoftware.cn:30053/api/history-process-instance/queryscreen",
                    method: "get",
                }).then(res => {
                    console.log(res);
                    resolve(333333 + "_success");
                }).catch(e => {
                    reject(333333 + "_" + e);
                });
            });
        },
        async ajax4() {
            return new Promise((resolve, reject) => {
                console.log(444);
                axios({
                    url: "http://demo.leansoftware.cn:30053/api/history-process-instance/queryscreen",
                    method: "get",
                }).then(res => {
                    console.log(res);
                    resolve(444444 + "_success");
                }).catch(e => {
                    reject(444444 + "_" + e);
                });
            });
        },
        async ajax5() {
            return new Promise((resolve, reject) => {
                console.log(555);
                axios({
                    url: "http://demo.leansoftware.cn:30053/api/history-process-instance/queryscreen",
                    method: "get",
                }).then(res => {
                    console.log(res);
                    resolve(555555 + "_success");
                }).catch(e => {
                    reject(555555 + "_" + e);
                });
            });
        }
    },
};
</script>

<style scoped>
</style>

1.针对Promise的测试，其实就相当于是同步了。这使我想到原生的ajax，是支持同步的，可以这样写async:false。区别应该是Promise不会阻塞线程，UI还可以继续交互。注意是应该哈，我没验证。。。

2.针对Promise的测试，如果想让第一个异步完成后，等待1秒再执行第2个异步，可以这样写：

        async ajax3() {
            return new Promise((resolve, reject) => {
                console.log(333);
                axios({
                    url: "http://demo.leansoftware.cn:30053/api/history-process-instance/queryscreen",
                    method: "get",
                }).then(res => {
                    setTimeout(() => {
                        console.log(res);
                        resolve(333333 + "_success");
                    }, 1000);
                }).catch(e => {
                    reject(333333 + "_" + e);
                });
            });
        }

3.针对Promise的测试，testPromise方法前面不需要加async的，ajax3/ajax4/ajax5方法内部也是不需要添加await的。

4.针对async await的测试，如果想使用第一个方法返回的值，可以这样写：

        async testAwait() {
            var result = await this.ajax1();
            console.log(result);
            await this.ajax2();
        }

        async ajax1() {
            console.log(111);
            return await axios({
                url: "http://demo.leansoftware.cn:30053/api/history-process-instance/queryscreen",
                method: "get",
            }).then(res => {
                console.log(111111);
                console.log(res);
                return 111111;
            }).catch(e => {
                console.log(e);
            });
        }

主要是ajax1方法里面添加了return返回，ajax1的axios的then也添加了return返回。使用的话 var result = await this.ajax1(); 这样就行了。

5.针对async await的测试，好像做不到等待几秒后再执行下一个操作，Promise是可以的。这个未做实验，所以不确定。。。