web前端怎么调用api接口

Posted 2023-03-04

1、首先需要确定第三方的接口的基本信息：地址、请求方式，参数、返回值，接口模式这里第三方的接口是restful风格的，采用get请求。

2、确定好接口的相关模式之后，这里编写http的请求，用参数、请求模式构造请求。

3、这里最重要的构造http的请求，这里采用CloseableHttpClient，设置相关的header，采用HttpResponse接受用户的返回值。

4、在业务类中只需要封装相关的请求，把参数传入给接口中即可，这里返回jsonObject方便解析使用。

5、调用api接口还有其他的模式，如图通过MultiValueMap，封装参数，构造HttpEntity对象，RestTemplate 发送请求即可。

参考技术A

以VUE 使用axios为例：

1、调用GET接口：

axios.get().then().catch()

例如：

axios.get('/user',    params: ID: 12345)

.then(function (response) console.log(response);)

.catch(function (error) console.log(error); );

注：get方式传参数可以直接跟在url后面，也可以通过param对象传

2、调用POST接口：

axios.post().then().catch()

注：post方式传参必须用对象传

扩展资料

VUE中的axios方式调用接口使用特点：

1、在浏览器中发送 XMLHttpRequests 请求

2、在 node.js 中发送 http请求

3、支持 Promise API

4、拦截请求和响应

5、转换请求和响应数据

6、取消请求

7、自动转换为JSON数据

8、客户端支持保护安全免受 CSRF/XSRF 攻击

参考技术B

方法/步骤

先定义一个简单的webapi，简单到差不多直接用vs2010自动生成的webapi代码。

其中的TestModle是一个简单的class，如下

public class TestModle

public string a get; set;

public string b get; set;

public string c get; set;



前端页面放四个代表get，post，put，delete的按钮，在加一个div显示返回值



前端代码中加载jquery，在定义四个按钮的click事件



get和post，我习惯用$.get和$.post，当然也能用$.ajax.

get直接返回webapi get的return值，post的话我就不在后端做处理了直接返回传入的值，这里只做示范



put和delete，只能用$.ajax来处理。

put的话一般用于update某个id的数据信息

delete用于删除某个id的数据，如下图所示



点击每个按钮，可以在页面上看到相应的效果