axios异步请求的两种写法

choorn

已于 2023-09-18 21:02:39 修改

阅读量419

点赞数

分类专栏： #axios 文章标签：前端 vue.js

于 2023-05-06 01:49:58 首次发布

本文链接：https://blog.csdn.net/choorn/article/details/130518484

版权

#axios 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章对比了使用async/await和Promise对象的.then().catch()两种方式来处理HTTP请求。在async函数中，通过await关键字等待axios的响应，然后处理数据或捕获错误。而在Promise链式调用中，.then()接收成功响应，.catch()处理错误。两种方法都用于更新tableData的值，并显示错误信息。

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

1、async 、await写法

async function sendRequest(type:string,url:string,param?:any,tableData?:Ref) {

    try {
        const response = await axios({
            url: `${baseUrl}${url}`,
            method: type,  //请求方式：get、post等
            params: param,
            paramsSerializer: params => {
                return stringify(params,{indices:false,allowDots:true}); 
            }
        });
        if(undefined !== tableData){
            tableData.value = response.data;
        }
        // return response.data;

    } catch (error) {
        ElMessage(String(error));
    }
}

2、promise对象的.then .catch写法

/**
 * type:指定访问类型，post，get，……
 * url:传入访问地址
 * param:访问参数，可选
 * tableData:传入的展示数据响应对象，可选
 */
function sendRequest(type: string, url: string, param?: any, tableData?: Ref) {
    axios({
        url: `${baseUrl}${url}`,
        method: type,
        params: param,
        paramsSerializer: params => {
            return stringify(params, { indices: false, allowDots: true });
        }
    }).then((response) => {
        if (undefined !== tableData) {
            tableData.value = response.data;
        }
    }).catch(err=>{
        ElMessage(String(err));
    })
}