vue接口调用方式
但是我们大部分时候可能用上面原生的ajax的时候是很少的,我们一般都是用jQuery封装好的Api,这个前提是我们需要先引入jQuery文件,否则提示报错,jQuery的ajax使用步骤大致如下所示。前端要做动态数据渲染,只能通过调用接口的方式来获取服务端的数据,目前常见的方式有ajax,fetch,axios等常见的方式可以获取接口的数据,我们来分别认识一下这些操作方式..fetch支持很多请求
前端要做动态数据渲染,只能通过调用接口的方式来获取服务端的数据,目前常见的方式有ajax,fetch,axios等常见的方式可以获取接口的数据,我们来分别认识一下这些操作方式..
1.1.1 原生ajax
ajax主要是负责是客户端和服务端异步数据通信的工具,原生的ajax对浏览器支持比较好,所以群众基础还是比较广的,我们先来看一下原生的ajax如何实现对接口数据的请求:
ajax教程参见: AJAX 教程 | 菜鸟教程
原生的ajax请求数据大致分为如下几个步骤:
<script>
let xhr = null;
//实例化xmlhttprequest对象
xhr = new XMLHttpRequest();
//配置要请求的接口地址
xhr.open("post","url地址",true);
//设置请求的头部信息,如果是post请求的话
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
//设置请求后状态发生变化的回调函数
xhr.onreadystatechange = ()=>{
};
// 发送请求
xhr.send();
</script>
例如:
自己封装一个ajax对象。发送异步请求:
ajax.js:
function ajax(json){
//{
// url:''
// }
var json=json||{};
if(!json.url){
return false
}
json.type=(json.type||'get').toUpperCase()
// console.log(json.type);
//发送ajax请求
//1.首先创建一个ajax对象
var xhr=new XMLHttpRequest();
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
// console.log('测试1'+xhr);
}else{
xhr = new ActiveXObject('microsoft.XMLHttp');
// console.log('测试2'+xhr);
}
//2.发送请求
if(json.type=='GET'){
xhr.open('get',json.url,true)
xhr.send();
}else if(json.type=='POST'){
}
//3.将从服务器上,请求到的数据显示在页面上
xhr.onreadystatechange=function(){
//响应已就绪
// console.log(xhr.readyState);
if(xhr.readyState==4 && xhr.status==200){
var resObj=JSON.parse(xhr.responseText)
// console.log(resObj);
json.success(resObj)
}
}
// console.log(json);
return json
}
index.html中操作:
<button id="btn">测试</button>
<script src="./js/ajax.js"></script>
<script>
//天气的接口地址
var apiUrl=`http://wthrcdn.etouch.cn/weather_mini?city=合肥`
var btn=document.querySelector('#btn') ;
btn.onclick=function(){
// console.log('ok');
ajax({
url:apiUrl,
type:'get',
dataType:'json',
success:function(result){
console.log(result);
}
})
}
</script>
预览:
1.1.2 jQuery的ajax
但是我们大部分时候可能用上面原生的ajax的时候是很少的,我们一般都是用jQuery封装好的Api,这个前提是我们需要先引入jQuery文件,否则提示报错,jQuery的ajax使用步骤大致如下所示
<script>
$.ajax({
url:"",
data:{
},
type: "post",
dataType: "json",
async: true,
success(res){
},
error(){
}
})
</script>
1.1.3 fetch
-
Fetch API是新的ajax解决方案 Fetch会返回Promise
-
fetch不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest对象
-
基本结构大致如下 fetch(url, options).then()
fetch API教程参见:
例如:
<div>
获取的接口数据是:
<h1 id="tit"></h1>
</div>
<script>
//nodejs接口地址 http://localhost:4000/adata
var apiUrl='http://localhost:4000/adata';
fetch(apiUrl).then(function(data){
// console.log(data.text());
//它返回一个Promise实例对象,用于获取后台返回的数据
return data.text()
}).then(function(data){
document.querySelector('#tit').innerHTML=data
console.log(data);
})
</script>
app.js
app.get('/adata',(req,res)=>{
res.send('小余同学');
})
预览:
fetch支持很多请求的方式如POST,GET,DELETE,UPDATE,PATCH和PUT
-
默认的是 GET 请求
-
需要在 options 对象中 指定对应的 method method:请求使用的方法
-
post 和 普通 请求的时候 需要在options 中 设置 请求头 headers 和 body
<script>
var apiUrl=`http://localhost:4000/apilogin`
fetch(apiUrl+'?id=123', {
// get 请求可以省略不写 默认的是GET
method: 'get'
})
.then(function(data) {
return data.text();
}).then(function(data) {
//转化为JSON对象
dObj=JSON.parse(data)
console.log(dObj);
console.log(dObj.data.id)
});
</script>
login.json
{
"code":0,
"message":"登录成功",
"data":{
"token":"vip",
"id":"123123",
"user":"admin",
"passward":"123456"
}
}
预览:
4.3.4 axios
-
基于promise用于浏览器和node.js的http客户端
-
支持浏览器和node.js
-
支持promise
-
能拦截请求和响应
-
自动转换JSON数据
-
能转换请求和响应数据
axios基础用法
-
get和 delete请求传递参数
-
通过传统的url 以 ? 的形式传递参数
-
restful 形式传递参数
-
通过params 形式传递参数
-
-
post 和 put 请求传递参数
-
通过选项传递参数
-
通过 URLSearchParams 传递参数
-
axios官网地址:axios中文网|axios API 中文文档 | axios
<script src="./js/vue.js"></script>
<script src="./js/axios.js"></script>
<script>
// 1.发送get请求
var apiUrl=`http://localhost:4000/adata`;
axios.get(apiUrl).then(function(data){
console.log(data);
})
预览:
app.js
app.get('/acdata/:id',(req,res)=>{
console.log(req.params);
res.send('小余同学');
})
//2.请求传递参数
var id=123123
var apiUrl=`http://localhost:4000/acdata/${id}`;
axios.get(apiUrl).then(function(data){
console.log(data);
})
在app.js文件夹下运行npm run serve
预览:
html页面预览:
postman中预览:
post传递参数:
var apiUrl=`http://localhost:4000/pdata`;
axios.post(apiUrl,{
uname:'xy',
pwd:123
}).then(function(data){
console.log(data);
})
app.js
var bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
app.post('/pdata',(req,res)=>{
console.log(req.body);
res.send('hx')
})
预览:
postman预览:
更多推荐
所有评论(0)