小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
Vue前后端交互
1.前后端交互模式
1.1 接口调用方式
- 原声 ajax
- 基于jQuery的ajax
- fetch
- axios
1.2 URL地址格式
1.2.1 传统形式的URL
1.2.2 Restful形式的URL
2. Promise 用法
2.1 异步调用
-
异步效果分析（可以使用以下三类实现）
- 定时任务
- Ajax
- 事件函数
-
多次异步调用的依赖分析
- 多次异步调用的结果顺序不能确定
- 异步调用结果如果存在依赖需要嵌套，可能造成回调地狱的现象
2.2 Promise 概述
Promise 是异步编程的一种解决方案，从语法上讲，Promise是一个对象，从它可以获取异步操作的消息。
2.3 Promise 基本使用
- 我们使用new来构建一个Promise Promise的构造函数接收一个参数，是函数，并且传入两个参数： resolve，reject， 分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数
- Promise实例生成以后，可以用then方法指定resolved状态和reject状态的回调函数
示例代码如下：
<body>
<script>
var p = new Promise(function (resolve, reject) {
// 实现异步交互
setTimeout(function () {
var flag = false;
if (flag) {
// 正常情况下
resolve('正常');
} else {
// 异常情况下：
reject('出错了')
}
}, 100);
});
// 用then方法指定resolved状态和reject状态的回调函数
p.then(function (data) {
console.log(data);
}, function (err) {
console.log(err);
});
</script>
</body>
2.4 基于Promise处理Ajax请求
-
处理原生Ajax
/* 基于Promise发送Ajax请求 */ function queryData(url) { return new Promise(function(resolve, reject){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState != 4) return; if(xhr.readyState == 4 && xhr.status == 200) { // 处理正常的情况 resolve(xhr.responseText); }else{ // 处理异常情况 reject('服务器错误'); } }; xhr.open('get', url); xhr.send(null); }); } -
发送多次ajax请求
// 发送多个ajax请求并且保证顺序 queryData('http://localhost:3000/data') .then(function(data){ console.log(data) return queryData('http://localhost:3000/data1'); }) .then(function(data){ console.log(data); return queryData('http://localhost:3000/data2'); }) .then(function(data){ console.log(data) });
2.5 then 参数中的函数返回值
-
返回Promise实例对象
- 返回的该示例对象会调用下一个then
-
返回普通值
- 返回的普通值会直接传递给下一个then，通过then参数中函数的参数接收该值
2.6 Promise常用API
2.6.1.实例方法
p.then()得到异步任务的正确结果p.chtch()获取异常信息p.finally()成功与否都会执行（尚且不是正式标准）
示例代码如下：
<script>
// Promise常用API - 实例对象
function foo() {
return new Promise(function (resolve, reject) {
setTimeout(function () {
/* 正确结果
resolve('正确显示'); */
// 错误结果
reject('error')
}, 100);
});
};
// 调用foo函数
foo()
/* 方式一：catch then finally
.then(function(data){
console.log(data)
})
.catch(function(data){
console.log(data)
})
.finally(function() {
console.log('执行完毕')
}) */
// 方式二：
.then(function (data) {
console.log(data)
}, function (data) {
console.log(data)
})
.finally(function () {
console.log('执行完毕')
})
</script>
2.6.2 对象方法
Promise.all()并发处理多个异步任务，所有任务都执行完成才能得到结果Promise.race()并发处理多个异步任务，只要一个任务执行完成就能得到结果
示例代码如下：
<body>
<script>
function queryData(url) {
return new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState != 4) return;
if (xhr.readyState == 4 && xhr.status == 200) {
// 处理正常的情况
resolve(xhr.responseText);
} else {
// 处理异常情况
reject('服务器错误');
}
};
xhr.open('get', url);
xhr.send(null);
});
}
var p1 = queryData('http://localhost:80/a1');
var p2 = queryData('http://localhost:80/a2');
var p3 = queryData('http://localhost:80/a3');
Promise.all([p1, p2, p3]).then(function (result) {
console.log(result); //["Hello TOM!", "Hello JERRY!", "Hello SPIKE!"] 三秒后返回一个数组
});
Promise.race([p1, p2, p3]).then(function (result) {
console.log(result); //Hello TOM! 只返回一个结果
})
</script>
</body>
\
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！