axios SSE 调用 axios调用webservice

webapi基于版本net5

1. 用axios发送GET请求

1.1 带有简单参数

针对简单类型的参数，只需要前后端名称一致即可。

如：
前端方法
发送get请求axios用params

function Send(){
            axios({
                method:"GET",
                url:"http://127.0.0.1:5000/Home",
                params:{
                    id:"555",
                    name:"张三"
                }
            }).then(response=>{               
                console.log(response);
            });
        }

后端接口

namespace ApiTest.Controllers
{
    [ApiController]
    [Route("[controller]")]
    [EnableCors("any")]//允许跨域访问该控制器
    public class HomeController : ControllerBase
    {
         [HttpGet]
        public void GetInfo(string id,string name){
            
        }

    }
}

1.2 带有实体参数

实体类：

namespace ApiTest
{
    public class Todo
    {
        //ID
        public string Id { get; set; }        

        //名称        
        public string Name { get; set; }
    }
}

前端方法

function Send(){
            var obj={
                Id:"555",
                Name:"张三"
            }

            axios({
                method:"GET",
                url:"http://127.0.0.1:5000/Home",
                params:obj
            }).then(response=>{               
                console.log(response);
            });

        }

注意：get请求的时候，默认是将参数全部放到了url里面直接以string的形式传递的，get请求的数据会附在URL之后（就是把数据放置在HTTP协议头中），而post请求则是放在http协议包的包体中。后台是需要一个实体接收，前面是一个个参数的传，所以后台用对象是接收不到的。如果用Jquery发送ajax请求则后端不会有这个问题。因为jquery发送的格式是FormData类型和axios不一样。

解放方式：

方法一：因为是net5，所以，我们可以选择注释掉控制器上的[ApiController]特性，这样就不会进行apiController的验证。就是默认用FormData的方式接收。

方法二：不注释[ApiController]特性，在参数前面加[FromQuery]进行接收

2. 用axios发送POST请求

2.1 带一个参数

方法1：

需要在请求报文的请求头里声明Content-Type请求头的类型为'application/json'

'application/json'类型则必须要传递序列化过的对象。也就是将对象序列化为JSON字符串格式传递给后端。

前端方法

function Send(){

            axios({
                headers: {
                    'Content-Type': 'application/json'
                },
                method:"POST",
                url:"http://127.0.0.1:5000/Home",
                data:JSON.stringify("123")
            }).then(response=>{               
                console.log(response);
            });
			
        }

。

后端接收：
后端在参数前加[FormBody]特性进行接收。

我们一般的通过url取参数的机制是键值对，即某一个key等于某一个value，而这里的FromBody和我们一般通过url取参数的机制则不同，它的机制是=value，没有key的概念，并且如果你写了key(比如你的ajax参数写的{NAME:"Jim"})，后台反而得到的NAME等于null。

namespace ApiTest.Controllers
{
    [ApiController]
    [Route("[controller]")]
    [EnableCors("any")]//允许跨域访问该控制器
    public class HomeController : ControllerBase
    {
        [HttpPost]
        public void Insert([FromBody]string id){

        }
 }

方法2：

使用路由传参的方式
这里是传递两个参数，如果传一个只要后面不加即可。

前端方法

function Send(){

            axios({
                method:"POST",
                url:`http://127.0.0.1:5000/Home/${"555"}/${"张三"}`,
            }).then(response=>{               
                console.log(response);
            });
        }

后端配置路由

[HttpPost("{id}/{name}")]
        public void Insert(string id,string name){

        }

前端请求发送的格式

2.2 带多个参数

方式1

前端直接传JSON对象即可。后端用对象接收

前端方法

function Send(){

            var obj={
                Id:"555",
                Name:"张三"
            }

            axios({
                method:"POST",
                url:"http://127.0.0.1:5000/Home",
                data:obj
            }).then(response=>{               
                console.log(response);
            });
        }

后端接口用对象接收：

使用实体作为参数的时候，前端直接传递普通json对象，后台直接使用对应的类型去接收即可，不加上FromBody和加上FromBody一样能接收结果。

也不用修改请求头Content-Type为：'application/json'。它的请求头Content-Type默认就是：'application/x-www-form-urlencoded'。也就是以前的fromData类型

http的Content-Type的类型：
application/x-www-form-urlencoded ： <form encType=””>中默认的encType，form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式）

application/json ： JSON数据格式

[HttpPost]
        public void Insert(Todo todo){

        }

方式2

用方式1太麻烦，还要专门定义一个对象接收，而且这里也只是传两个参数，太不灵活了。使用dynamic就是很灵活的选择。

前端传JSON对象字符串。注意，要改变请求头Content-Type为：'application/json'。

function Send(){

            var obj={
                Id:"555",
                Name:"张三"
            }

            axios({
                headers: {
                    'Content-Type': 'application/json'
                },    
                method:"POST",
                url:`http://127.0.0.1:5000/Home`,
                data:JSON.stringify(obj)
            }).then(response=>{               
                console.log(response);
            });
        }

后端接口：
虽然前端将obj对象序列化为了JSON字符串了。但是axios传递到后端的还是一个JSON对象。只不过这个JSON对象的值是一个序列化为JSON字符串的对象。

[HttpPost]
        public void Insert(dynamic obj){
           
            //转为JSON字符串(本身就是JSON对象格式，转为JSON字符串)
            string jsonstr=Convert.ToString(obj);
        
            var newObj=JsonConvert.DeserializeObject<dynamic>(jsonstr);

            string id=newObj.Id;

            string name=newObj.Name;            
        }