Vue学习笔记3--前后端交互
前后端交互
完整的基础篇笔记PDF下载，完全手打有用的话请给个赞呗Thanks♪(･ω･)ﾉ
概述
接口调用模式
- 原生ajax
- jQuery的ajax
- fetch
- axios
Promise用法
js异步调用例子
- 定时任务
- ajax
- 事件函数
回调地狱问题
Ajax的Promise处理方式
function queryData(url){
var p = new Promise(function(resolve,reject){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState != 4)return;
if(xhr.status == 200){
//正常情况
resolve(xhr.responseText);
}else{
//异常情况
reject('服务器故障！');
}
};
xhr.open('get',url);
xhr.send(null);
});
return p;
}
//调用
queryData("http://localhost:8080/test/all")
.then(function(data){
//正常情况
console.log(data);
},function(info){
//异常情况
console.log(info);
});
解决回调地狱问题
queryData(url1)
.then(function(data){
return queryData(url2);
})
.then(function(data){
return queryData(url3);
})
.then(function(data){
return queryData(url4);
});
then函数返回值：
- 返回Promise对象：返回该实例对象调用下一个then
- 返回普通值：返回的普通值直接传递给下一个then，通过then参数中函数的参数接收该值
Promise常用API
实例方法：
- p.then()：正常信息
- p.catch()：异常信息
- p.finally()：最后都执行
对象方法：
- Promise.all()：并发执行多个异步任务，所有任务执行完成才能得到结果
- Promise.race()：并发处理多个异步任务，只要有一个任务完成就能得到结果
Promise.all([p1,p2,p3]).then(result=> {
console.log(result)
});
Promise.race([p1,p2,p3]).then(result=> {
console.log(result)
});
fetch用法（原生）
特性
- 简洁、强大、灵活、xhr的升级
- 基于Promise实现
语法
fetch(url).then(fn2)
.then(fn3)
...
.catch(fn)
demo
fetch('http://localhost:8080/test/all').then(result=> {
//通过fetch的text（）方法返回一个Promise对象在下一个then中获取返回数据
return result.text();
}).then(data =>{
console.log(data);
})
fetch请求参数
常用配置项：
- method：请求方式，String类型
- body：请求参数
- headers：请求头，默认{}，object类型
fetch(url,{
method: 'post',
body: JSON.stringify({
uname: 'hhh',
pwd: '123456'
}),
headers: {
'Content-Type' : 'application/json'
}
}).then(fn2)
.then(fn3)
...
.catch(fn)
fetch响应结果
格式
- text(): 将返回体处理为字符串类型
- json(): 将返回体处理为json类型
axios用法（第三方）
基于Promise用于浏览器和node.js 的HTTP客户端
特性
- 支持浏览器和node.js
- 支持Promise
- 能拦截请求和响应
- 自动装换JSON数据
基本用法
axios.get(url,params)
.then(res => {
console.log(res.data)
})
.catch(err => {
console.error(err);
})
demo
axios.get('http://localhost:8080/test/all')
.then(res => {
console.log(res.data)
})
.catch(err => {
console.error(err);
})
常用API
- get
- post
- put
- delete
响应结果
主要属性
- data：实际响应数据
- headers：响应头信息
- status：想应状态码
- statusText：响应状态信息
全局配置
-
超时时间
axios.defaults.timeout=3000; -
默认(基本)地址
axios.defaults.baseURL='http://localhost:8080/api' -
设置请求头
axios.defaults.headers['myToken'] = 'fsa2er3dst4';
拦截器
请求拦截器
基本用法
axios.interceptors.request.use(config => {
// 请求前做一些事情
return config;
},error => {
// 请求出错做的事情
return Promise.reject(error);
});
响应拦截器
基本用法
axios.interceptors.response.use(response => {
// 获得响应时做一些数据
return response;
},error => {
// 响应出错的时候做一些事情
return Promise.reject(error);
});
async/await用法
基本用法
- async/await是ES7引入的新语法，更加方便异步操作
- async 关键字用于函数上（async 函数的返回值是Promise）
- await 关键字用于async 函数中（await 可以得到异步的结果）
async function queryData() {
var ret = await axios.get('http://localhost:8080/test/all');
return ret;
}
queryData().then(ret => {
console.log(ret.data)
})
处理多个异步请求
async function queryData() {
var info = await axios.get('http://localhost:8080/test/all');
var ret = await axios.get('http://localhost:8080/test/query?id='+ info.data[0].id);
return ret;
}
queryData().then(ret => {
console.log(ret.data)
})
