首页 > 其他分享 >封装Axios的POST和GET

封装Axios的POST和GET

时间:2023-10-13 16:33:18浏览次数:34  
标签:Axios GET url resp param code params 事务处理 POST

对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){
			 // 事务处理
}                                        

标签:Axios,GET,url,resp,param,code,params,事务处理,POST
From: https://www.cnblogs.com/lsj4/p/17762452.html

相关文章

  • postgreSQL基本操作
    一、使用psql工具连接到数据库psql-Upostgres#postgres是具体的用户名,应具体情况具体分析效果如图:二、有关于数据库的基本指令pg不同于mysql,它的指令更为精简1、获取所有数据库信息\l2、选定数据库\c${yourdatebasename}3、获取所有表的信息\dt#此指令需......
  • 【Postman】postman安装及使用
    简介Postman是一款简单方便的接口调试工具,便于分享和协作。具有接口调试、请求集管理、环境配置、参数化、断言、批量执行、请求录制、MockServer,、接口文档、接口监控等功能。 安装 ·官网下载地址:https://www.getpostman.com/downloads/  主界面解析 功能介......
  • Postman接口测试
    编写代码之前需手动提前创建并选择对应的环境!!!postman使用的是js语言1、自动关联数据描述:接口A的请求参数依赖于接口B的响应数据例如:接口调用需要登录校验,需要先调登录接口拿到token/cookie解决方法:①从接口B的响应数据中提取关联数据,保存关联数据在公共容器中pm对象的详......
  • 在上一操作期间遇到问题: “Debug|AnyCPU”配置中 "TargetFrameworkMoniker" 和 "NuGe
    最近在学习avalonia的源代码,突然间visualstudio2022提示很多好多类似的红色错误在上部菜单下方xxx项目在上一操作期间遇到问题:“Debug|AnyCPU”配置中"TargetFrameworkMoniker"和"NuGetTargetMoniker"属性的值均为空。此配置将影响NuGet还原,这可能导致还原和生成错误......
  • 22 axios和axios拦截器
    1.axios由于jquery有严重的地狱回调逻辑.再加上jquery的性能逐年跟不上市场节奏.很多前端工程师采用axios来发送ajax.相比jquery.axios更加灵活.且容易使用.更加美丽的是.这玩意是用promise搞的.所以更加贴合大前端的项目需求.来吧.上手试试吧<scriptsrc="/static/......
  • vue中下载excel文件4种方法,2、通过 a 标签 download 属性结合 blob 构造函数下载发送p
    vue中下载excel文件4种方法,2、通过a标签download属性结合blob构造函数下载发送post请求和后台poi返回文件流实现下载1、通过url下载即后端提供文件的地址,直接使用浏览器去下载通过window.location.href=文件路径下载window.location.href=`${location.origin}/opera......
  • Vue报错Syntax Error:TypeError: this.getOptions is not a function的解决方法~
    前几天在vue运行项目过程中报错了,这个方法是关于Vue报错SyntaxError:TypeError:this.getOptionsisnotafunction的解决方法(1)报错一(2)报错二~1.1问题分析首先,检查代码,并没有什么错误的地方;其次,涉及到这个问题,可能就是版本原因了,安装的sass-loader版本太高,卸载安装低......
  • 微信支付 Verify the signature and get the Wechatpay certificate corresponding to
    1.先获取商户证书文件这块叫商户证书需要和下面的支付证书名字区分在微信开放平台里面下载商户证书,用apiclient_cert.pem取获取'商户证书的序列号'证书查看  2.需要下载一个jar,生成微信证书时候用Releases·wechatpay-apiv3/CertificateDownloader·GitHub  3......
  • 使用Github Action实现构建、发布到 nuget.org
    使用GithubAction实现构建、发布到nuget.orgGitHubActions是GitHub提供的持续集成和持续部署(CI/CD)工具,它能够自动化构建、测试和部署你的项目。在这篇教程中,我们将探讨如何使用GitHubActions来构建一个.NET项目,并将它发布到NuGet.org。配置NuGetAPI密钥首先进入nuget......
  • 解决 springboot 2.6.6 版本中内嵌 tomcat 9.0.60 版本 严格执行RFC 3986规范,导致在 G
    项目中get请求:http://domain:port/api/module/function/getList?pageNum=1&pageSize=1000&keyWord=[]&id=;keyWord的参数应该是 keyWord="[]",如果不加双引号,keyWord就变成了数组,后台接口就报错了。调查原因:springboot2.6.6版本中内嵌tomcat9.0.60版本严格执行RFC3986规范......