axios封装http请求

最新推荐文章于 2023-03-21 21:15:10 发布

weixin_33874713

最新推荐文章于 2023-03-21 21:15:10 发布

阅读量288

点赞数

CC 4.0 BY-SA版权

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/yhquan/p/10197083.html

本文介绍了一种使用Axios库封装HTTP请求的方法，包括POST和GET请求的封装，错误处理，以及请求参数的处理。提供了自定义错误类用于前端和服务端错误处理，通过示例展示了如何使用封装后的函数发送请求并处理响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import axios from 'axios'

const HTTP_TIMEOUT = 15000;

export function httpPost(url, params = {},headers = {}) {
    return axios.post(url, params, {
        headers,      
        timeout: HTTP_TIMEOUT,
        withCredentials: true,
    }).then(resp=>resp.data);
}

export function httpGet(url, params = {}) {
    return axios.get(url, {
        params,
        timeout: HTTP_TIMEOUT,
        withCredentials: true,
    }).then(resp=>resp.data);
}

export const errorCode = {
    SUCCESS: 0,
}

// 发送请求，并且对返回进行处理
// succConvert  函数-后台数据格式转换

function postAndConvertResp(url, params, succConvert, errConvert, headers = {}) {
    return httpPost(url, params,headers)
        .then(resp => {
            return resp.err_code === errorCode.SUCCESS ?
                succConvert(resp.result) :
                errConvert ? errConvert(resp.err_code) : requestErrorHandler(resp.err_code, resp.err_msg);
        })
}


// 发送请求，并且对返回进行处理
function getAndConvertResp(url, params, succConvert, errConvert) {
    return httpGet(url, params)
        .then(resp => {
            return resp.err_code === errorCode.SUCCESS ?
                succConvert(resp.result) :
                errConvert ? errConvert(resp.err_code) : requestErrorHandler(resp.err_code, resp.err_msg);
        })
}




// 默认错误处理
function requestErrorHandler(errCode, errMsg) {　　
　　throw new ServerRespError(errMsg);
}

// 前端自定义错误
export class ParamError extends Error {
    constructor(message) {
        super(message)
    
        this.errorType = 'ParamError'
    }
}

// 服务端返回错误
export class ServerRespError extends Error {
    constructor(message) {
        super(message)
    
        this.errorType = 'ServerRespError'
    }
}

post请求参数处理：

function appendCommon2QueryStr(params) {
    return data2ParamString(params);
}

// param对象转换为paramStr
function data2ParamString(data) {
    if (typeof data === 'string') {
        return data;
    }
    return objectToParamString(data);
}

// 将对象转换成键值对形式，只支持单层
function objectToParamString(data) {
    var ret = '';
    for (var key in data) {
        ret = ret + key + '=' + encodeURIComponent(data[key]) + '&';
    }
    ret = ret.substr(0, ret.length - 1); // 去除最后的'&'
    return ret;
}


// 示例
export function example(reqData) {
    let request = {
         exam : reqData.exam
    }

    request = appendCommon2QueryStr(request);

    return postAndConvertResp(URL, request, succConvert)
}