封装Axios的POST和GET

发布时间 2023-10-13 16:29:42作者: 凉冰24

对Axios的POST和GET请求的封装

POST请求的两种形式。

参数JSON格式

/**
 * 传递json数据,在请求报文中是json格式
 * @param url
 * @param params
 * @returns {AxiosPromise}
 */
function doPostJson(url, params) {
    return axios({
        url: url,
        method: 'post',
        data: params
    })
}

调用

let param = {
	name:this.name,
	phone:this.phone,
    code:this.code
}
doPostJson('/v1/user/login',param)
	.then(resp=>{
		if(resp && resp.data.code == 200){
			// 事务处理
    	}
    })

后端接收参数

    @PostMapping("/v1/user/login")
    public RespResult userRealname(@RequestBody LoginVO loginVO){
    	// loginVo封装了name,phone,code三个字段
        // 事务处理
    }

url?key=value形式

import qs from 'qs';
/**
 * 请求是  key=value参数格式
 * @param url
 * @param params
 * @returns {AxiosPromise}
 * */
function doPost(url, params) {
    //qs 把json对象转为 a=1&b=2 , 也可以反向
    let requestData = qs.stringify(params);
    return axios.post(url, requestData);
}

调用

doPost('/v1/user/login',{ name:this.name,phone:this.phone,code:this.code})
	.then(resp=>{
		if( resp  && resp.data.code == 200){
       		 // 事务处理
     	}
     })

后端接收参数

@PostMapping("/v1/user/login")
public RespResult userLogin(@RequestParam String phone,
                            @RequestParam String pword,
                            @RequestParam String scode){
                           // 事务处理      
}

Get请求

/**
 *
 * @param url      url请求的地址,去掉了baseURL以外的部分
 * @param params  是对象,json对象。表示请求的参数
 * @returns {AxiosPromise}
 */
function doGet(url, params) {
    return axios({
        url: url,
        method: 'get',
        params: params
    });
}

测试Get

doGet('/v1/product/list', {ptype: productType, pageNo: pNo, pageSize: pSize})
	.then(resp => {
    	if (resp) {
        	 // 事务处理
        }
    })

Get请求后端

@GetMapping("/v1/product/list")
public RespResult queryProductByType(@RequestParam("ptype") Integer pType,
                                     @RequestParam("pageNo") Integer pageNo,
                                     @RequestParam("pageSize") Integer pageSize){
			 // 事务处理
}