“JavaScript 循环中的 ‘await‘

本文介绍: 在JavaScript的`forEach`方法中使用`await`是无效的，因为`forEach`方法不支持异步操作的等待。`forEach`是一个数组的遍历方法，它会对数组中的每个元素依次执行提供的回调函数。而在JavaScript中，`await`关键字只能在异步函数(`async`函数)中使用，用于等待一个Promise对象的解析结果。在`forEach`的回调函数中使用`await`关键字，实际上会导致它被忽略，无法正确地等待异步操作的完成。

前言

for使用await — 有效的（非并非）

forEach使用await — 无效的（并发）

for of 使用await 有效的（非并发）

for await of 使用await 有效的（并发）

`for`使用`await -- 有效的（非并非）`

<script>
    let arr = ["我", "爱", "编", "程"]
    function getDatas(e) {
        return axios.get(`https://api.oioweb.cn/api/txt/dict?text=${e}`)
    }
    async function execute() {
        for (let i = 0; i < arr.length; i++) {
            console.log(`第${i + 1}次${arr[i]}执行了`)
            let datas = await getDatas(arr[i])
            console.log("返回结果：" + datas.data.result.words)
            console.log(`第${i + 1}次${arr[i]}执行完了`)
            console.log("---------end--------------")
        }
    }
    execute()

</script>

`forEach`使用`await --` 无效的（并发）

<script>
    let arr = ["我", "爱", "编", "程"]
    function getDatas(e) {
        return axios.get(`https://api.oioweb.cn/api/txt/dict?text=${e}`)
    }
    async function execute() {
        arr.forEach(async (item, index) => {
            console.log(`第${index + 1}次${item}执行了`)
            let datas = await getDatas(item)
            console.log("返回结果：" + datas.data.result.words)
            console.log(`第${index}次${item}执行完了`)
            console.log("---------end--------------")
        })
    }
    execute()

</script>

可以看到forEach中使用await是无效的，只不过await后面的代码能按顺序执行；

`for of` 使用`await 有效的（非并发）`

<script>
    let arr = ["我", "爱", "编", "程"]
    function getDatas(e) {
        return axios.get(`https://api.oioweb.cn/api/txt/dict?text=${e}`)
    }
    async function execute() {
        let index = 0
        for (const item of arr) {
            console.log(`第${index + 1}次${item}执行了`)
            let datas = await getDatas(item)
            console.log("返回结果：" + datas.data.result.words)
            console.log(`第${index + 1}次${item}执行完了`)
            console.log("---------end--------------")
            index += 1
        }

    }
    execute()

</script>

`for await of` 使用`await 有效的（并发）`

<script>

    function getDatas(e) {
        return axios.get(`https://api.oioweb.cn/api/txt/dict?text=${e}`)
    }
    let arr = [getDatas("我"), getDatas("爱"), getDatas("编"), getDatas("程")]
    async function execute() {
        let index = 0
        for await (const item of arr) {
            console.log(`第${index + 1}次，方法${index + 1}执行了`)

            console.log("返回结果：" + item.data.result.words)
            console.log(`第${index + 1}次方法${index + 1}执行完了`)
            console.log("---------end--------------")
            index += 1
        }

    }
    execute()

</script>


<script>

    let url = ` https://api.oioweb.cn/api/txt/dict?text=我`
    let arr = [url, url, url, url,]

    function getDatas(url) {
        return axios.get(url)
    }
    let newsArr = arr.map(async item => {
        return await getDatas(item)

    })

    Promise.all(newsArr).then(res => {
        console.log(res);
    }).catch(err => {
        console.log(err);
    })



</script>