【VUE3.0体验】关于axios提交方式

后台使用的是.net core webapi，其有两种，一种是fromform，一种是frombody

1、fromform可以接收一些简单类型的数据，比如string,int等等，写法如下

参数单一

post(url, params, callback) {
        return new Promise((resolve, reject) => {
            axios.post(url, qs.stringify(params)).then(res => {
                callback ? resolve(callback(res.data)) : resolve(res.data);
            }).catch(err => { reject(err); })
        })
    },

let params = { "userid": userid };
return await request.post(UserApiUrl + 'sys/restpwd', params);后

后台

 [HttpPost]
        public IActionResult Remove([FromForm] string UserId)
        {
            if (string.IsNullOrWhiteSpace(UserId)) { UserId = string.Empty; }
            ResultInfo resultInfo = new ResultInfo();
            int flag = _userService.Remove(UserId);
            if (flag > 0)
            {
                resultInfo.Success = true;
                resultInfo.Msg = "删除成功";
            }
            else
            {
                resultInfo.Msg = "删除失败";
            }
            return Content(JsonHelper.SerializeObject(resultInfo));
        }

2、formbody，无法接收简单参数，一般以DTO类的方式传入

postbody(url, params, callback) {
        return new Promise((resolve, reject) => {
            axios({
                url:url,
                method:'post',
                data:params,
                contentType: "application/json; charset=UTF-8"
            }).then(res => {
                callback ? resolve(callback(res)) : resolve(res);
            }).catch(err => { reject(err); })
        })
    }

此如调用方法需要修改，如果还是原来的方法，则会返回415错误　　

let params = {"RoleId":1,"RoleName":"bbb"};
return await request.postbody(UserApiUrl+'sys/test',params);

需要注意的是RoleId在后台是数字型，如果写成"RoleId":"1"，后台无法接收到数据，切记

 [HttpPost]
        public IActionResult Test([FromBody] RoleDtoModel roleDtoModel)
        {
            return Content(JsonHelper.SerializeObject(roleDtoModel));
        }

　　

总结：两种方式各有利弊吧，如果就一个简单参数，也没必要弄个类出来,也可以把参数类型写成object，但是总觉得这样不是太好，看实际应用中的选择。

另外HttpGet是不需要FromBody或者Fromfom这个标记的。

===============================================================================

typescript封装方法

import axios,{AxiosRequestConfig} from 'axios';

axios.interceptors.request.use((config:AxiosRequestConfig) => {
    config.headers={
        "Authorization":"Bearer " + sessionStorage.getItem("token")
    } ;
    return config;
});

const request = {
    get(url:string, params:any, callback?:any) {
        return new Promise((resolve, reject) => {
            axios.get(url, { params: params }).then(res => {
                callback ? resolve(callback(res.data)) : resolve(res.data);
            }).catch(err => { reject(err); })
        })
    },

    post(url:string, params:any, callback?:any) {
        return new Promise((resolve, reject) => {
            axios.post(url,params,{
                headers:{
                    'Content-Type':'application/json; charset=UTF-8'
                }
            }                
            ).then(res => {
                callback ? resolve(callback(res)) : resolve(res.data);
            }).catch(err => { reject(err); })
        })
    }
};

export default request