axios 访问data类型和.net core 后端对应接收

jingcairensheng2024-11-11 11:13

一、关于get和post方法采用的参数类型

1、get用到的data类型一般为query和params，由于请求url有最大限制，常用于参数和参数值比较小的场景，也是比较常用的场景。

data类型:query是拼接参数紧接到url后面，

javascript 复制代码

axios.get('/api/data?param1=value1&param2=value2')
    .then(response => {
        // 处理响应
    })
    .catch(error => {
        // 处理错误
    });

params是参数单独放在查询参数的params里面

javascript 复制代码

axios.get('/api/data', {
    params: {
        param1: 'value1',
        param2: 'value2'
    }
})
.then(response => {
    // 处理响应
})
.catch(error => {
    // 处理错误
});

对应的后端代参数为 $FromQuery$ 码如下：

cs 复制代码

 [HttpGet]
    public IActionResult Get(string param1, string param2)
    {
        // 你的逻辑
        return Ok(new { param1, param2 });
    }

二、post方法常用于数据量大的场景，常用的data类型分别是data和params

需要内容形式为'Content-Type': 'multipart/form-data'和FormData结合使用，在网页里显示的位置也不一样，可以结合使用

1、当data类型为params时，携带查询参数值

javascript 复制代码

let formData = new FormData();
formData.append('key1','value1');
formData.append('key2','value2');
axios.post('/api',  {
    headers: {
        'Content-Type': 'multipart/form-data'
    },
    params:formData
})
.then(response => {
    // 请求成功处理逻辑
})
.catch(error => {
    // 请求失败处理逻辑
});

对应后端数据参数需要加上FromForm

cs 复制代码

[HttpGet]
    public IActionResult api([FromForm]string param1, [FromForm]string param2)
    {
        // 你的逻辑
        return Ok(new { param1, param2 });
    }

2.当data为data时，发送数据

javascript 复制代码

let formData = new FormData();
formData.append('key1','value1');
formData.append('key2','value2');
axios.post('/api', {
    headers: {
        'Content-Type': 'multipart/form-data'
    },
    data:formData
})
.then(response => {
    // 请求成功处理逻辑
})
.catch(error => {
    // 请求失败处理逻辑
});

cs 复制代码

[HttpGet]
    public IActionResult api([FromForm]string param1, [FromForm]string param2)
    {
        // 你的逻辑
        return Ok(new { param1, param2 });
    }

3.FromForm和FromBody的用法区别：前者是明确的参数值类型，后者则是不需要明确的参数值类型，常用做对象