http.js(with axios qs)

本文介绍了一种使用Axios进行HTTP请求的封装方法,并实现了请求防抖功能以防止重复提交。通过设置请求拦截器和响应拦截器,确保了请求的唯一性和正确处理响应。

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

import axios from 'axios';
import qs from 'qs';

let baseURL = 'http://tech.hupu.io'; //项目域名地址\

if (process.env.NODE_ENV === 'development') {
    baseURL = "";
}

const Axios = axios.create({
    baseURL: baseURL,
    timeout: 5000,
    withCredentials: true 
});

const CancelToken = axios.CancelToken;
const requestMap = new Map();

// 请求前置拦截器
Axios.interceptors.request.use(
    config => {

        // 防重复提交
        const keyString = qs.stringify(Object.assign({}, { url: config.url, method: config.method }, config.data));
        if (requestMap.get(keyString)) {
            // 取消当前请求
            config.cancelToken = new CancelToken((cancel) => {
                cancel('Please slow down a little');
            });
        }
        requestMap.set(keyString, true);
        Object.assign(config, { _keyString: keyString });

        if (config.method === 'post' || config.method === 'put' || config.method === 'delete') {
            // 序列化
            config.data = qs.stringify(config.data);
        }

        return config;
    },
    error => {
        return Promise.reject(error);
    }
);

// 返回响应拦截器
Axios.interceptors.response.use(
    res => {
        // 重置requestMap
        const config = res.config;
        requestMap.set(config._keyString, false);

        if (res.status === 200) {
            return res.data;
        }
        // todo 弹窗提示等
        console.log(`request error:${res}`);
    },
    error => {
        return {
            code: -1
        };
    }
);

/**
 * @description
 * 请求
 * @param url
 * @param data
 * @param method
 */
const request = (url, data = {}, method = 'post') => {
    return Axios({
        method,
        url,
        data,
        params: method.toUpperCase() === 'GET' && data
    });

};

export { request };
<think>好的,我现在需要解决用户遇到的Axios请求返回状态码415的问题。首先,我得回忆一下HTTP状态码415的含义。415UnsupportedMedia Type表示服务器无法处理请求附带的媒体格式。这通常发生在请求的Content-Type头部与服务器期望的不匹配时。用户之前可能已经尝试过发送请求,但遇到了这个问题。我需要先检查用户提供的代码示例,虽然用户之前的问题引用了一个使用jspdf和ajax的例子,但当前问题涉及的是Axios,所以可能需要调整请求的配置。首先,确保请求头中的Content-Type正确。比如,如果发送的是JSON数据,应该设置为application/json。如果服务器期望的是表单数据,可能需要使用application/x-www-form-urlencoded。这一步是关键,因为Content-Type错误会导致服务器拒绝请求。 其次,检查请求体的数据格式是否正确。比如,使用JSON时,数据需要正确序列化,而表单数据则需要正确的编码格式。Axios默认会根据data的类型自动设置Content-Type,但有时候可能需要手动指定,特别是当数据是对象时,Axios会默认转为JSON,但服务器可能需要其他格式。 另外,检查服务器端是否支持接收的媒体类型。比如,如果后端期望的是XML,而客户端发送的是JSON,就会导致415错误。这时候需要前后端协商一致。用户可能没有正确设置请求头,或者在发送数据时没有正确格式化。例如,使用FormData对象时,需要设置multipart/form-data,并且正确附加数据。如果使用URLSearchParams,则需要设置对应的Content-Type。 还需要考虑是否使用了正确的HTTP方法,比如POST、PUT等,是否与服务器端接口匹配。某些情况下,方法不正确也可能导致媒体类型不支持的问题,但更常见的是Content-Type的问题。 可能的解决方案包括显式设置headers中的Content-Type,使用transformRequest处理数据格式,或者使用qs库来序列化数据为表单格式。同时,检查服务器端的配置,确保它支持客户端发送的媒体类型。 最后,建议用户使用浏览器开发者工具或Postman测试请求,查看实际的请求头和体,以便更准确地调试问题。此外,查看服务器端日志也能帮助定位问题原因。</think>要解决Axios请求返回状态码415(Unsupported Media Type)的问题,需确保请求内容格式与服务器要求的媒体类型匹配。以下是分步解决方案: --- ### **1. 检查请求头`Content-Type`** 服务器通过`Content-Type`判断请求数据的格式。若客户端与服务器类型不匹配,会触发415错误。 **示例配置:** ```javascript axios.post(url, data, { headers: { 'Content-Type': 'application/json' // 根据接口要求调整 } }) ``` --- ### **2. 确认数据格式与`Content-Type`一致** - **JSON数据**:需将对象转为JSON字符串,并设置`Content-Type: application/json` ```javascript axios.post(url, JSON.stringify({ key: 'value' }), { headers: { 'Content-Type': 'application/json' } }) ``` - **表单数据**:使用`URLSearchParams`或`FormData`,并设置对应类型: ```javascript const params = new URLSearchParams(); params.append('key', 'value'); axios.post(url, params, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }) ``` --- ### **3. 使用`transformRequest`处理数据格式** 当需要强制转换数据格式时,可通过Axios的`transformRequest`配置: ```javascript axios.post(url, { key: 'value' }, { transformRequest: [(data) => { return new URLSearchParams(data).toString(); }], headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }) ``` --- ### **4. 验证服务器支持的媒体类型** 检查服务器接口文档,确认支持的`Content-Type`类型(如`application/json`、`multipart/form-data`)。例如,Spring Boot后端需通过`consumes`属性声明: ```java @PostMapping(value = "/api", consumes = MediaType.APPLICATION_JSON_VALUE) ``` --- ### **5. 调试工具辅助定位问题** - **浏览器开发者工具**:在Network标签页检查请求头与实际发送的数据格式。 - **Postman测试**:手动发送不同格式的请求,验证服务器响应。 --- ### **常见错误场景** 1. **未序列化JSON数据**:直接发送JavaScript对象而未调用`JSON.stringify()` 2. **表单数据未编码**:未使用`URLSearchParams`或`FormData`处理表单数据 3. **请求头缺失**:未显式设置`Content-Type`,导致Axios自动推断错误 --- ### **相关问题** 1. 如何通过Axios发送文件上传请求(multipart/form-data)? 2. Axios拦截器如何统一处理请求头? 3. 如何解决CORS与415状态码同时出现的问题? 4. 如何在后端Spring Boot中配置支持的媒体类型? --- 通过上述步骤,可系统性定位并解决415错误。若问题仍存在,建议对比Postman成功请求与Axios请求的原始报文差异[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值