为vue开发的api管理系统，助力您的项目开发
398
2022-08-06
接口调用方式,接口调用方式几种
本文讲述了接口调用方式,接口调用方式几种。
一、原生ajax
具体用法：
post比get请求多一步
第一步：创建异步对象
var xhr = new XMLHttpRequest();
第二步：设置 请求行 open(请求方式，请求url):
// get请求如果有参数就需要在url后面拼接参数，
// post如果有参数，就在请求体中传递 xhr.open("get","validate.php?username="+name)
xhr.open("post","validate.php");
第三步：设置请求（GET方式忽略此步骤）头:setRequestHeader()
// 1.get不需要设置
// 2.post需要设置请求头：Content-Type:application/x-www-form-urlencoded
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
第四步：设置请求体 send()
// 1.get的参数在url拼接了，所以不需要在这个函数中设置
// 2.post的参数在这个函数中设置(如果有参数)
xhr.send(null) xhr.send("username="+name);
第五步：让异步对象接收服务器的响应数据
// 一个成功的响应有两个条件：1.服务器成功响应了 2.异步对象的响应状态为4(数据解析完毕可以使用了)
xhr.onreadystatechange = function(){
if(xhr.status == 200 && xhr.readyState == 4){
console.log(xhr.responseText);
}
二、jquery中ajax
具体用法：
通过$ajax发起请求
$.ajax({
type:"get",// get或者post
url:"abc.php",// 请求的url地址
data:{},//请求的参数
dataType:"json",//json写了jq会帮我们转换成数组或者对象 他已经用JSON.parse弄好了
timeout:3000,//3秒后提示错误
beforeSend:function(){
// 发送之前就会进入这个函数
// return false 这个ajax就停止了不会发 如果没有return false 就会继续
},
success:function(data){ // 成功拿到结果放到这个函数 data就是拿到的结果
},
error:function(){//失败的函数
},
complete:function(){//不管成功还是失败 都会进这个函数
}
总结：这种方式会受到CSRF攻击（跨站请求伪造）和xss攻击（跨站脚本攻击）
针对MVC编程，不符合现在前端MVVM的浪潮，项目太大引入整个jquery不合理
三.基于promise设计的fetch
前言：先介绍promise
//主要解决异步深层嵌套的问题（回调地狱）
//promise提供了简洁的APi，使异步操作更加容易
new Promise( function(resolve, reject) {..异步任务.} /* executor */ );
// Promise实例生成以后，可以用then方法指定resolved状态和reject状态的回调函数
// 在then方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了
1.基于Promise发送Ajax请求
<script type="text/javascript">
function queryData(url) {
# 1.1 创建一个Promise实例
var p = new Promise(function(resolve, reject){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState != 4) return;
if(xhr.readyState == 4 && xhr.status == 200) {
# 1.2 处理正常的情况
resolve(xhr.responseText);
}else{
# 1.3 处理异常情况
reject('服务器错误');
}
};
xhr.open('get', url);
xhr.send(null);
});
return p;
}
# 注意： 这里需要开启一个服务
# 在then方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了(.then成功的响应，.catch失败的响应)
queryData('http://localhost:3000/data')
.then(function(data){
console.log(data)
# 1.4 想要继续链式编程下去 需要 return
return queryData('http://localhost:3000/data1');
})
.then(function(data){
console.log(data);
return queryData('http://localhost:3000/data2');
})
.then(function(data){
console.log(data)
});
</script>
2.promise基本API
实例方法
.then()
- 得到异步任务正确的结果
.catch()
- 获取异常信息（并不是某个promise对象的catch,谁出错，catch就捕获谁）
.finally()
- 成功与否都会执行（不是正式标准）
静态方法
.all()
- `Promise.all`方法接受一个数组作参数，数组中的对象（p1、p2、p3）均为promise实例（如果不是一个promise，该项会被用`Promise.resolve`转换为一个promise)。它的状态由这三个promise实例决定
.race()
- `Promise.race`方法同样接受一个数组作参数。当p1, p2, p3中有一个实例的状态发生改变（变为`fulfilled`或`rejected`），p的状态就跟着改变。并把第一个改变状态的promise的返回值，传给p的回调函数
fetch
fetch API 中的 HTTP 请求
- fetch(url, options).then(）
- HTTP协议，它给我们提供了很多的方法，如POST，GET，DELETE，UPDATE，PATCH和PUT
- 默认的是 GET 请求
- 需要在 options 对象中 指定对应的 method:请求使用的方法
- post 和 普通请求的时候 需要在options 中 设置 请求头 headers和 body
<script type="text/javascript">
/*
Fetch API 调用接口传递参数
*/
#1.1 GET参数传递 - 传统URL 通过url ？ 的形式传参
fetch('http://localhost:3000/books?id=123', {
# get 请求可以省略不写 默认的是GET
method: 'get'
})
.then(function(data) {
# 它返回一个Promise实例对象，用于获取后台返回的数据
return data.text();
}).then(function(data) {
# 在这个then里面我们能拿到最终的数据
console.log(data)
});
#1.2 GET参数传递 restful形式的URL 通过/ 的形式传递参数 即 id = 456 和id后台的配置有关
fetch('http://localhost:3000/books/456', {
# get 请求可以省略不写 默认的是GET
method: 'get'
})
.then(function(data) {
return data.text();
}).then(function(data) {
console.log(data)
});
#2.1 DELETE请求方式参数传递 删除id 是 id=789
fetch('http://localhost:3000/books/789', {
method: 'delete'
})
.then(function(data) {
return data.text();
}).then(function(data) {
console.log(data)
});
#3 POST请求传参
fetch('http://localhost:3000/books', {
method: 'post',
# 3.1 传递数据
body: 'uname=lisi&pwd=123',
# 3.2 设置请求头
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
.then(function(data) {
return data.text();
}).then(function(data) {
console.log(data)
});
# POST请求传参
fetch('http://localhost:3000/books', {
method: 'post',
body: JSON.stringify({
uname: '张三',
pwd: '456'
}),
headers: {
'Content-Type': 'application/json'
}
})
.then(function(data) {
return data.text();
}).then(function(data) {
console.log(data)
});
# PUT请求传参 修改id 是 123 的
fetch('http://localhost:3000/books/123', {
method: 'put',
body: JSON.stringify({
uname: '张三',
pwd: '789'
}),
headers: {
'Content-Type': 'application/json'
}
})
.then(function(data) {
return data.text();
}).then(function(data) {
console.log(data)
});
</script>
fetchAPI 中 响应格式
- 用fetch来获取数据，如果响应正常返回，我们首先看到的是一个response对象，其中包括返回的一堆原始字节，这些字节需要在收到后，需要我们通过调用方法将其转换为相应格式的数据，比如`JSON`，`BLOB`或者`TEXT`等等
-
/*
Fetch响应结果的数据格式
*/
fetch('http://localhost:3000/json').then(function(data){
// return data.json(); // 将获取到的数据使用 json 转换对象
return data.text(); // // 将获取到的数据 转换成字符串.text纯文本字符串
}).then(function(data){
// console.log(data.uname)
// console.log(typeof data)
var obj = JSON.parse(data);
console.log(obj.uname,obj.age,obj.gender)
})
总结：符合关注分离，更加底层，提供的API丰富（request,response）,缺点是只对网络请求报错，对400,500当做成功请求，需要封装处理，默认不会带cookie需要添加配置项，且没有办法原生监测请求进度；
四、基于promise的axios(用于浏览器和node.js的HTTP客户端)
基于promise用于浏览器和node.js的http客户端
支持浏览器和node.js
支持promise
能拦截请求和响应
自动转换JSON数据
能转换请求和响应数据
axios基础用法
get和 delete请求传递参数
通过传统的url 以 ? 的形式传递参数
restful 形式传递参数
通过params 形式传递参数
post 和 put 请求传递参数
通过选项传递参数
通过 URLSearchParams 传递参数
具体用法、
# 1. 发送get 请求
axios.get('http://localhost:3000/adata').then(function(ret){
# 拿到 ret 是一个对象 所有的对象都存在 ret 的data 属性里面
// 注意data属性是固定的用法，用于获取后台的实际数据
// console.log(ret.data)
console.log(ret)
})
# 2. get 请求传递参数
# 2.1 通过传统的url 以 ? 的形式传递参数
axios.get('http://localhost:3000/axios?id=123').then(function(ret){
console.log(ret.data)
})
# 2.2 restful 形式传递参数
axios.get('http://localhost:3000/axios/123').then(function(ret){
console.log(ret.data)
})
# 2.3 通过params 形式传递参数
axios.get('http://localhost:3000/axios', {
params: {
id: 789
}
}).then(function(ret){
console.log(ret.data)
})
#3 axios delete 请求传参 传参的形式和 get 请求一样
axios.delete('http://localhost:3000/axios', {
params: {
id: 111
}
}).then(function(ret){
console.log(ret.data)
})
# 4 axios 的 post 请求
# 4.1 通过选项传递参数
axios.post('http://localhost:3000/axios', {
uname: 'lisi',
pwd: 123
}).then(function(ret){
console.log(ret.data)
})
# 4.2 通过 URLSearchParams 传递参数
var params = new URLSearchParams();
params.append('uname', 'zhangsan');
params.append('pwd', '111');
axios.post('http://localhost:3000/axios', params).then(function(ret){
console.log(ret.data)
})
#5 axios put 请求传参 和 post 请求一样
axios.put('http://localhost:3000/axios/123', {
uname: 'lisi',
pwd: 123
}).then(function(ret){
console.log(ret.data)
})
关于axios系列操作
//1.axios 全局配置
# 配置公共的请求路径
axios.defaults.baseURL = 'https://api.example.com';
# 配置 超时时间
axios.defaults.timeout = 2500;
# 配置公共的请求头
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
# 配置公共的 post 的 Content-Type
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
//2.axios 拦截器
在axios请求成功，返回的结果中，我们要的结果被包含在data的字段中，我们可以使用响应拦截器，将数据抽出来
- 请求拦截器
- 请求拦截器的作用是在请求发送前进行一些操作
- 例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易
- 响应拦截器
- 响应拦截器的作用是在接收到响应后进行一些操作
- 例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页
# 2.1. 请求拦截器 （发送之前会进入请求拦截器）
axios.interceptors.request.use(function(config) {
console.log(config.url)
# a. 任何请求都会经过这一步 在发送请求之前做些什么
config.headers.mytoken = 'nihao';
# b. 这里一定要return 否则配置不成功
return config;
}, function(err){
#c. 对请求错误做点什么
console.log(err)
})
#2.2 响应拦截器 （响应之后会进入拦截器）
axios.interceptors.response.use(function(res) {
#a. 在接收响应做些什么
var data = res.data;
return data;
}, function(err){
# b.对响应错误做点什么
console.log(err)
})
将axios异步请求同步化操作（使用async、await）
封装Promise完成多个异步操作
<script src="./jquery.js"></script>
<script>
// promise的封装
function request(url) {
return new Promise((resolve, reject) => {
$.ajax({
url: url,
success(data) {
resolve(data);
},
error(err) {
reject(err);
},
});
});
}
// 额外定义一个async函数
async function fn() {
// 第一个await没有响应结束,第二个await是不会响应的
const res1 = await request("http://localhost:3000/data");
const res2 = await request("http://localhost:3000/data1");
const res3 = await request("http://localhost:3000/data2");
console.log(res1);
console.log(res2);
console.log(res3);
}
fn();
</script>
函数前async关键字，async放在函数之前，将函数变为一个异步函数
之前多次使用ajax请求，写的是回调地狱的样式，后来通过使用promise处理，将回调地狱的问题解决了，async和await是进一步简化异步操作（本质是为了简化.then）
async作为一个关键字放到函数前面
任何一个async函数都会隐式返回一个promise
await关键字只能放在async函数中
await关键字只能在使用async定义的函数中使用
await后面可以直接跟一个 Promise实例对象
await函数不能单独使用,一般与async同时出现
async/await 让异步代码看起来、表现起来更像同步代码
# 1. async 基础用法
# 1.1 async作为一个关键字放到函数前面
async function queryData() {
# 1.2 await关键字只能在使用async定义的函数中使用 await后面可以直接跟一个 Promise实例对象
var ret = await new Promise(function(resolve, reject){
setTimeout(function(){
resolve('nihao')
},1000);
})
// console.log(ret.data)
return ret;
}
# 1.3 任何一个async函数都会隐式返回一个promise 我们可以使用then 进行链式编程
queryData().then(function(data){
console.log(data)
})
#2. async 函数处理多个异步函数
axios.defaults.baseURL = 'http://localhost:3000';
async function queryData() {
# 2.1 添加await之后 当前的await 返回结果之后才会执行后面的代码
var info = await axios.get('async1');
#2.2 让异步代码看起来、表现起来更像同步代码
var ret = await axios.get('async2?info=' + info.data);
return ret.data;
}
queryData().then(function(data){
console.log(data)
})
常见的接口调用方式有三种（设计接口的时候要考虑选用哪种接口）
1、http接口：http是一种网络传输协议，基于TCP。（等价于：http+json）
现在浏览器客户端与服务器端通信基本都是采用http协议。
SpringCloud框架，各个服务间也是通过http方式来实现的。
http api接口是走http协议，通过路径来区分调用的方法，请求报文都是key-value形式的，返回报文一般都是json串。
http有几个特点：
（1）规定了数据格式
（2）对服务没有任何技术限定，自由灵活，更符合为服务理念。
（3）现在热门的REST风格 / RESTful 风格，就可通过Http协议来实现。
请求方式：post/get/put/delete 等。
传输的数据格式(一般而言)：JSON
2、rpc接口：远程过程调用(类似的还有RMI)，基于TCP。
自定义数据式，基于原生TCP通信，速度快，效率高。
现在热门的dubbo框架，就是RPC的典型代表。
rpc有几个特点：
（1）数据的格式可以自定义（一般是XML）。
（2）速度快，效率高。
（3）现在比较热门的dubbo就是RPC的典型代表。
传输的数据格式：XML
3、webservice接口：Webservice是系统对外的接口。（等价于：http+xml）
webService接口是走soap协议通过http传输，请求报文和返回报文都是xml格式的。
webService接口提供的服务是基于web容器的，底层使用http协议，类似一个远程的服务提供者，比如天气预报服务，对各地客户端提供天气预报，是一种请求应答的机制，是跨系统跨平台的。就是通过一个servlet，提供服务出去。
首先客户端从服务器的到WebService的WSDL，同时在客户端声称一个代理类(Proxy Class) 这个代理类负责与WebService服务器进行Request 和Response 当一个数据（XML格式的）被封装成SOAP格式的数据流发送到服务器端的时候，就会生成一个进程对象并且把接收到这个Request的SOAP包进行解 析，然后对事物进行处理，处理结束以后再对这个计算结果进行SOAP包装，然后把这个包作为一个Response发送给客户端的代理类(Proxy Class)，同样地，这个代理类也对这个SOAP包进行解析处理，继而进行后续操作。这就是WebService的一个运行过程。
webservice大体上分为5个层次:
Http传输信道
XML的数据格式
SOAP封装格式
WSDL的描述方式
UDDI UDDI是一种目录服务，企业可以使用它对Webservices进行注册和搜索
应用协议是SOAP（简单对象访问协议）
传输的数据格式：XML
4、总结1(接口的选择)
现在很多第三方接口，都改成了基于http，直接传递json数据的方式来代替webservice。
但是webservice接口能传输数据量比较大的数据，而且可以跟语言无关，也可以跟操作系统无关。
在某些业务复杂，稳定性和正确性要求高的领域（如ERP、电商、支付），WebService还有是用武之地的。
5、总结2（传输数据格式的选择）
为什么JSON比XML流行
还是易用性，JSON的可读性比XML强，解析规则也简单许多。
XML 解析的时候规则太多了，动不动就非法字符，动不动就抛异常。这对追求高开发速度和低开发门槛的企业来说，是个致命伤。
JSON的缺点是数据类型支持较少，且不精确。比方说：
{"price":12580}
1
在json里，你无法知道这个价格是int, float还是double。
所以，如上面第二条所述，在一些业务要求较高的领域，还是XML更合适。
最后说一下性能， JSON 的性能高于XML，除此之外，基于 XML 和 HTTP 的 WebService , 基于 JSON 的RESTful API ，并没有性能差异。
上述就是小编为大家整理的接口调用方式,接口调用方式几种。
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
暂时没有评论，来抢沙发吧~