小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
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) });注意：第一个 return的是一个新的Promise实例对象，下一个then调用的是上一个return出来的新的Promise实例对象。与之相同，下一个return和then也是如此。
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>
\
