NETCORE - 接口请求方式

NETCORE - 请求方式

 

Get 方式

Get请求接口的参数一般可以在url中获取

后端

        [HttpGet]
        [Route("GetDictionaryDataAsync")]
        public async Task<ActionResult> GetDictionaryDataAsync(string key)
        {
            try
            {
                var con = await iADataDictionaryRepository.GetDictionaryDataAsync(key);
                return Ok(con);
            }
            catch (Exception ex)
            {
                return BadRequest(ex.Message);
            }
        }

 

接口调用：

https://localhost:7096/api/ADataDictionary/GetDictionaryDataAsync?key=string

 

axios 调用

export async function api_GetDictionaryDataAsync(key) {
    const res = await axios({
        url: `${baseURL}/api/ADataDictionary/GetDictionaryDataAsync`,
        method: 'get',
        params: { key: key }
    });
    return res;
}

 

 

如有 List<string> 类型的参数时，需给参数增加 [FromQuery] 注释

  public async Task<ActionResult> GetDictionaryArrAsync([FromQuery] List<string> keys)
        {
            try
            {
                var con = await iADataDictionaryRepository.GetDictionaryDataAsync(keys);
                return Ok(con);
            }
            catch (Exception ex)
            {
                return BadRequest(ex.Message);
            }
        }

 

接口调用：

https://localhost:7096/api/ADataDictionary/GetDictionaryArrAsync?keys=string1&keys=string2

 

axios 中调用：

import { axios } from '@/utils/axios';
import qs from 'qs';

export async function api_GetDictionaryArrAsync(keys) {
     const res = await axios({
        url: `${baseURL}/api/ADataDictionary/GetDictionaryArrAsync`,
        method: 'get',
        params: { keys: keys },
        paramsSerializer: params => {
            return qs.stringify(params, {
                arrayFormat: 'repeat',
            });
        },
    });
    return res;
}

 

 

 

 

 

 Post 方式

Post请求接口一般建议使用[FromBody]特性来绑定参数

      const postData = {
        id: 12,
      }; // post请求的数据，可自行定义
      this.$axios({
        url: api.postUrl,
        method: 'post',
        params: postData,
      })
        .then((result) => {
          this.$message({
            message: '请求成功',
            type: 'success',
            showClose: true,
          });
        })
        .catch((err) => {
          this.$message({
            message: '请求失败',
            type: 'error',
            showClose: true,
          });
        });

 

后端代码如下（.Net Core）:

       [HttpPost]
        public ActionResult HandlePost(int id)
        {
            return Content(id);
        }

 

FromBody特性的使用

如果使用上述方法请求，会发现id可以正常获取，因为axios以params方式提交post参数时，默认将参数放在url后面，而后端接口的参数中如果不加其他参数验证的注解，则会默认从url中寻找参数。而如果在接口的参数验证中加[FromBody]注解时，由于[FromBody]注解无法绑定简单类型的参数，因此将参数的类型改成dynamic，其中dynamic类型为动态类型，和Object类型类似，所以需要使用obj. id的方式来获取参数，即代码如下：

        [HttpPost]
        public ActionResult HandlePost([FromBody] dynamic obj)
        {
            return Content(obj.id);
        }

 

 

再次请求会发现后端报错415 UnSupported Media Type，因为当以params方式提交post参数时，请求头中无Content-Type字段，Axios源码中对请求做了处理，如下图：

 由此可知当使用params方式提交post参数时，即data参数为空时，即使手动设置请求头的Content-Type也会被清除，所以后端代码由于无法识别Content-Type字段，导致报错415 UnSupported Media Type。 为了解决这个问题，则可以将post提交参数的方式改成data方式提交，代码如下：

 

   const postData = {
        id: 12,
      }; // post请求的数据，可自行定义

      this.$axios({
        url: api.postUrl,

        method: 'post',

        data: postData,
      })
        .then((result) => {
          this.$message({
            message: '请求成功',

            type: 'success',

            showClose: true,
          });
        })
        .catch((err) => {
          this.$message({
            message: '请求失败',

            type: 'error',

            showClose: true,
          });
        });

 

然后再次请求会发现成功返回传的id参数值。

这里需要注意的是FromBody特性只接受Content-Type为application/json的请求，只有这样参数才能正确绑定，而axios的post请求中Content-Type默认为application/json, 如果在上述前端代码中手动修改请求头为application/x-www-formencoded或者multipart/form-data，则后台接口又会报错415 UnSupported Media Type.

 

注意

NETCore3.0以上的版本中，WebApi接口使用 dynamic传参中会 带有ValueKind属性的属性

背景：在.NET Core3.0+框架下编写WebApi并且使用dynamic类型传参，后台接收到的参数中会包含一个ValueKind的属性，包含ValueKind属性会影响取参的便捷性

导致原因：.NetCore3.0+默认的对象序列化解析程序为System.Text.Json下的JsonDocument，该解析程序解析dynamic出来的数据就会有ValueKind

解决办法（1）：将默认的序列化程序System.Text.Json替换为Newtonsoft.Json
1.NuGet引入包：Microsoft.AspNetCore.Mvc.NewtonsoftJson
2.Startup添加命名空间：using Newtonsoft.Json.Serialization;
3.Startup类的ConfigureServices方法中添加代码：

//添加对象序列化程序为Newtonsoft.Json
services.AddControllers().AddNewtonsoftJson(options =>
{
    options.SerializerSettings.ContractResolver = new DefaultContractResolver();
});

JObject传参解析报错问题也可用该方式解决

解决办法（2）:使用JsonConvert.DeserializeObject进行转换

dynamic dynParam = JsonConvert.DeserializeObject(Convert.ToString(param));
string strName = Conver.ToString(dynParam.Name);

 

 

 

FromForm特性的使用

FromForm特性和FromBody特性的区别是：FromForm特性是用来绑定form-data格式中的表单数据，即Content-Type为multipart/form-data，所以前端代码应修改为如下：

   let formData = new FormData();

      formData.append('id', 1212);

      this.$axios({
        url: api.postUrl,

        method: 'post',

        // 手动设置Content-Type为form-data格式

        headers: {
          'Content-Type': 'multipart/form-data',
        },

        data: formData,
      })
        .then((result) => {
          this.$message({
            message: '请求成功',

            type: 'success',

            showClose: true,
          });
        })
        .catch((err) => {
          this.$message({
            message: '请求失败',

            type: 'error',

            showClose: true,
          });
        });

 

  

后端代码修改为如下

        [HttpPost]
        public ActionResult HandlePost([FromForm] int id)
        {
            return Content(id);
        }

 

FromForm特性没有对简单类型的参数进行限制，所以可以直接获取参数，当formData中有多个参数需要绑定时，可以写成如下格式：

        [HttpPost]

        public ActionResult HandlePost([FromForm] int id, [FromForm] string name, ....)
        { // 只需要增加参数的个数就可以

            return Content(id);

        }  

 

 传递数组时，使用 paramsSerializer，参考：(48条消息) axios请求传递数组 paramsSerializer序列化_小小文呀的博客-CSDN博客_paramsserializer

 

 

转载于:https://juejin.im/post/5cdab497e51d453adf1fa729

 

 

  

 

 

 

https://blog.csdn.net/weixin_34129145/article/details/91441753 

引用：https://www.cnblogs.com/shy1766IT/p/5237164.html

 引用：https://blog.csdn.net/OYZ8610/article/details/120410898