【axios】axios 进行异步加载数据

小二·

已于 2024-05-02 12:20:01 修改

阅读量137

点赞数 2

文章标签： javascript 前端 vue.js

于 2024-04-30 16:39:23 首次发布

本文链接：https://blog.csdn.net/weixin_52208686/article/details/138338366

版权

文章介绍了如何使用axios进行异步数据加载，并展示了如何在async函数中使用await处理axios响应。同时提及了在不支持await的上下文中如何通过asyncScript.js实现异步操作的解决方案。

摘要由CSDN通过智能技术生成

笔记：

axios 进行异步加载数据


加载axios

async function returnData() {
    try {


        data={参数}

        const response = await axios.post('url', data);
        const resTblist = response.data.data;
        datajson = response.data;
        leng = resTblist.length;
        console.log(datajson)
        console.log(leng)
        console.log(resTblist);
        return resTblist;
    } catch (error) {
        console.error("axios 请求失败:" ,error);
        return [null];
    }
}

//  使用 await 获取到 axios 的返回值 
注意  await  只能在 async 中调用

async function someFunction(resTblist) {
    try {
        console.log(resTblist)
        if (resTblist.length === 0) {
            // 如果resTblist为空，则执行returnData() 函数，并将返回值赋值给resTblist
            const resTblist = await returnData();
            return resTblist;
        }else {
            console.log(resTblist);
            return resTblist;
        }
        console.log(resTblist);
        let dataTblist = resTblist;
        console.log(dataTblist)
}catch (error){
    console.error('An error occurred:', error);
    return ['获取数据失败：'+ error];
}
}

在其他地方调用 并返回参数  如果不在 async 函数中  调用 那不能使用 await 
  用 this 进行返回值 

someFunction(resTblist).then(resultTblist => {
                        console.log(resultTblist); // 这里将打印从 someFunction 返回的列表
                        // 你可以在这里使用 resultTblist 做进一步的处理
                    }).catch(error => {
                        console.error('处理 someFunction 结果时出错:', error);
                    });

如果不能使用 await 就写一个 asyncScript.js 文件并引用：

async function asyncFunction() {
    // 异步操作
    const result = await someAsyncOperation();
    return result;
}

// 假设 someAsyncOperation 是一个返回 Promise 的函数
function someAsyncOperation() {
    return new Promise((resolve, reject) => {
        // 异步操作逻辑
        setTimeout(() => {
            resolve('Done!');
        }, 1000);
    });
}