【】关于axios发送post请求返回400状态码【请求失败,code非200的】的问题,如何接收到json格式!

当你接收到400 这里失败请求的时候,其实已经成功访问服务器了,可能你发送的post数据在服务器那边校验失败了,如果你的服务器返回的是json格式的话,在前端接收到的也是json格式,如果你使用axios发送请求的话,在catch的时候,返回的error并不是一个对象,而是这样的字符串:

Error: Request failed with status code 400
    at createError (createError.js?2d83:16)
    at settle (settle.js?467f:18)
    at XMLHttpRequest.handleLoad (xhr.js?b50d:77) 

 

那么axios发送post请求不管成功状态码200,还是失败状态码400或其他,都接收到json格式,让我们前端知道具体是什么原因而请求失败呢【必须访问error.response响应对象】 

 

axios参考文档:https://www.kancloud.cn/yunye/axios/234845

 

本人错误处理代码:

async _getServerResponse () {
        axios.post( config.server_register_url, this.form_data ).then( result => {
            // 只有状态码为200,才能返回true,说明注册成功,其他状态码全部失败!
            return result.data.code === 200;
        } ).catch( ( error ) => {
            // 【务必注意】这里的error输出的不是一个对象【error.response才是一个对象】
            console.log(error);
            if (error.response) {
                // 请求已发出,但服务器响应的状态码不在 2xx 范围内
                console.log( error.response.data );
                console.log( error.response.status );
                console.log( error.response.headers );
            } else {
                // Something happened in setting up the request that triggered an Error
                console.log( "Error", error.message );
            }
            console.log( error.config );
        } );
        return false;
    }

 

### Vue3 中使用 Axios 发送 POST 请求 在 Vue3 中,可以通过 `axios` 库来发送 HTTP 请求。以下是基于提供的引用内容以及专业知识构建的一个完整的示例。 #### 安装 Axios 首先,在项目中安装 `axios`: ```bash npm install axios ``` #### 创建 Axios 实例并封装请求 为了更好地管理请求和响应,通常会创建一个独立的文件(如 `request.js`),用来封装 `axios` 并设置默认配置和拦截器: ```javascript // src/utils/request.js import axios from 'axios'; const service = axios.create({ baseURL: 'https://reqres.in', // 替换为实际 API 地址 timeout: 5000, // 设置超时时间 }); // Request 拦截器 service.interceptors.request.use( config => { // 在发送请求之前可以做一些操作,例如添加 token 到 headers if (localStorage.getItem('token')) { config.headers['Authorization'] = `Bearer ${localStorage.getItem('token')}`; } return config; }, error => { console.error(error); // 处理请求错误 Promise.reject(error); } ); // Response 拦截器 service.interceptors.response.use( response => { const res = response.data; // 如果接口返回状态码不是 200,则认为是有错误发生 if (res.code !== 200) { console.warn(`Error Code: ${res.code}, Message: ${res.message}`); return Promise.reject(new Error(res.message || 'Request failed')); } else { return res; // 返回成功的数据部分 } }, error => { console.error(error); // 处理响应错误 return Promise.reject(error); } ); export default service; ``` #### 使用封装后的 Axios 发送 POST 请求 接下来可以在具体的组件或服务层调用这个封装好的实例来进行 POST 请求。以下是一个简单的例子: ```javascript // src/apis/userApi.js import service from '@/utils/request'; export function createUser(data) { return service.post('/api/users', data); // 假设 /api/users 是目标接口路径 } ``` 在 Vue 组件中调用该方法: ```vue <template> <div> <h1>Create User</h1> <button @click="submitForm">Submit</button> </div> </template> <script> import { createUser } from '@/apis/userApi'; export default { name: 'CreateUser', data() { return { userData: { name: 'John Doe', job: 'Developer' }, articleId: null, }; }, methods: { async submitForm() { try { const response = await createUser(this.userData); this.articleId = response.id; // 获取服务器返回的数据 ID console.log('Created user with ID:', this.articleId); } catch (error) { console.error('Failed to create user:', error); } } } }; </script> ``` 以上代码展示了如何通过封装的 `axios` 实例发送 POST 请求,并处理其响应[^1]。 --- #### 关键点说明 1. **Base URL 和 Timeout 配置** 在创建 `axios` 实例时设置了基础 URL (`baseURL`) 和超时时间 (`timeout`),这使得后续所有的请求都继承这些配置[^4]。 2. **Interceptors 的作用** - **Request Interceptor**: 可以在每次请求前执行特定逻辑,例如加入认证令牌。 - **Response Interceptor**:接收到的响应进行统一处理,比如检查状态码是否正常。 3. **POST 数据格式化** 默认情况下,`axios` 会自动将 JavaScript 对象转换成 JSON 字符串作为请求体的一部分[^3]。 --- ###
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值