Javascript axios 后一段时间循环异步 / promise

Question

I'm new with async/await and I need a litle help. What I would like to achive is to send and axios post request after a while loop finished.

How can I put the while loop in an async function and await for it?

This is the current code:

showResults: function () {
            let vm = this;


            let apiUrl = '/api/test';
            let randomCallCount = Math.floor(Math.random() * (80 - 50 + 1) + 50);
            let start = 1;

            while (start <= randomCallCount) {
                let randomChars = [...Array(40)].map(i => (~~(Math.random() * 36)).toString(36)).join('');
                fetch('https://' + randomChars + '.ipleak.net/json/?query_type=mydns')
                        .then((resp) => resp.json())
                        .then(function (data) {
                            vm.dnsResult.push(data);
                        });

                start++;
            }

            axios.post(apiUrl, {lat: vm.geoLat, lon: vm.geoLon, dns: vm.dnsResult})...

I thought maybe something like this, but this one is not working:

            fetchDNSData: async function () {
            let vm = this;
            let promise = new Promise((resolve, reject) => {
                let randomCallCount = Math.floor(Math.random() * (80 - 50 + 1) + 50);
                let start = 1;

                while (start <= randomCallCount) {
                    let randomChars = [...Array(40)].map(i => (~~(Math.random() * 36)).toString(36)).join('');
                    fetch('https://' + randomChars + '.ipleak.net/json/?query_type=mydns')
                            .then((resp) => resp.json())
                            .then(function (data) {
                                vm.dnsResult.push(data);
                            });

                    start++;
                }
            });

            let result = await promise; // wait until the promise resolves (*)

            return result;
        },

        showResults: function () {
            let vm = this;


            let apiUrl = '/api/test';

            vm.fetchDNSData().then(
                    response => {
                        axios.post(apiUrl, {lat: vm.geoLat, lon: vm.geoLon, dns: vm.dnsResult})...

Any suggestion what can show me the right direction? :) Thanks a lot

Answer 1

If you are going to use async/await, you should not use then . Use await instead of then . The below example should be what you need.

showResults: async function () {
            let vm = this;


            let apiUrl = '/api/test';
            let randomCallCount = Math.floor(Math.random() * (80 - 50 + 1) + 50);
            let start = 1;

            while (start <= randomCallCount) {
                let randomChars = [...Array(40)].map(i => (~~(Math.random() * 36)).toString(36)).join('');
                const response = await fetch('https://' + randomChars + '.ipleak.net/json/?query_type=mydns');
                const data = await response.json();
                vm.dnsResult.push(data);

                start++;
            }

            axios.post(apiUrl, {lat: vm.geoLat, lon: vm.geoLon, dns: vm.dnsResult})...