Web全栈探索，Vue基础系列，前后端交互（一）
一、接口调用方式
- 原生ajax
- 基于jQuery的ajax
- fetch
- axios
二、Url地址格式
1.传统 url 地址格式
schema://host:port/path?query#fragment-schema ===> 协议
-host ===> 域名或者ip地址
-port ===> 端口
-path ===> 路径
-query ===> 查询参数
-fragment ===> 锚点(哈希Hash)2.Restful 形式的URL
HTTP请求方式
-GET ===> 查询 =============== 查
-POST ===> 添加 ============== 增
-PUT ===> 修改 =============== 改
-DELETE ===> 删除 ============ 删三、异步
1.什么是异步
JavaScript的执行环境是单线程
单线程 ===> JS引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个，它会「阻塞」其他任务。这个任务可称为主线程
异步模式可以一起执行多个任务
2.JS中的异步调用
- 定时任何
- ajax
- 事件函数
3.异步的解决与缺点
ajax 中各个请求的执行顺序是不确定的，取决于机器与每个任务的执行时间，即如果多次异步调用的结果存在依赖关系，就必须要解决这个顺序问题。而 ajax 解决这个问题的办法是利用嵌套的方式，但是这样就会产生一种现象——回调地狱！非常影响代码的美观与可读性
4."回调地狱" 的解决
promise（中文意思为承诺）
为了解决以上问题，promise 应运而生
promise 提供了简洁的API，主要解决异步深层嵌套的问题；使得异步操作更加容易
五、promise
1.Promise 的基本用法
因为 promise 取承诺之意，意味着它有着足够的把握应对网络中出现的两种状况；实际中 promise 利用 then 函数分情况处理事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
/*
Promise基本使用
Promise 接受两个参数，第一个参数 resolve() 是执行成功后执行的函数，第二个参数 reject() 是失败后执行的函数
*/
let p = new Promise(function(resolve, reject){
// 这里用于实现异步任务
setTimeout(function(){
// 自定义标志位，用于模仿网路请求的结果——成功与失败
let flag = true;
if(flag) {
// 正常情况
// 实参传入的数据，与下面 p.then 中的形参对应
// 本例中 '成功了' ===> data, '失败了' ===> info
resolve('成功了');
}else{
// 异常、出错情况
reject('失败了');
}
}, 100);
});
// p.then 有两个参数，分别是两个函数
// 第一个参数为成功时调用的函数，与 Promise 的 resolve() 函数对应
// 第二个参数位失败时调用的函数，与 Promise 的 reject() 函数对应
p.then(function(data){
alert(data)
},function(info){
alert(info)
});
</script>
</body>
</html>
2.Promise 处理 ajax 请求
xmlhttp.readyState的值及其对应意义
0：请求未初始化（还没有调用 open()
1：请求已经建立，但是还没有发送(还没有调用 send())。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）
3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成
4：响应已完成；您可以获取并使用服务器的响应了xmlhttp.status的值及解释：
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
200——交易成功
201——提示知道新文件的URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到，但返回信息为空
205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求
300——请求的资源可在多处得到
301——删除请求数据
302——在其他地址发现了请求数据
303——建议客户访问其他URL或访问方式
304——客户端已经执行了GET，但文件未变化
305——请求的资源必须从服务器指定的地址得到
306——前一版本HTTP中使用的代码，现行版本中不再使用
307——申明请求的资源临时性删除
400——错误请求，如语法错误
401——请求授权失败
402——保留有效ChargeTo头响应
403——请求不允许
404——没有发现文件、查询或URl
405——用户在Request-Line字段定义的方法不允许
406——根据用户发送的Accept拖，请求资源不可访问
407——类似401，用户必须首先在代理服务器上得到授权
408——客户端没有在用户指定的饿时间内完成请求
409——对当前资源状态，请求不能完成
410——服务器上不再有此资源且无进一步的参考地址
411——服务器拒绝用户定义的Content-Length属性请求
412——一个或多个请求头字段在当前请求中错误
413——请求的资源大于服务器允许的大小
414——请求的资源URL长于服务器允许的长度
415——请求资源不支持请求项目格式
416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求
500——服务器产生内部错误
501——服务器不支持请求的函数
502——服务器暂时不可用，有时是为了防止发生系统过载
503——服务器过载或暂停维修
504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长
505——服务器不支持或拒绝支请求头中指定的HTTP版本
1xx:信息响应类，表示接收到请求并且继续处理
2xx:处理成功响应类，表示动作被成功接收、理解和接受
3xx:重定向响应类，为了完成指定的动作，必须接受进一步处理
4xx:客户端错误，客户请求包含语法错误或者是不能正确执行
5xx:服务端错误，服务器不能正确执行一个正确的请求<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
/*
基于Promise发送Ajax请求
*/
function queryData(url) {
let p = new Promise(function(resolve, reject){
let xhr = new XMLHttpRequest();
// 指定回调函数
xhr.onreadystatechange = function(){
// 服务器未完成响应
if(xhr.readyState !== 4) return;
// 请求成功，并成功返回
if(xhr.readyState === 4 && xhr.status === 200) {
// 处理正常的情况
resolve(xhr.responseText);
}else{
// 处理异常情况
reject('出错了');
}
};
// 发送 get 方式的 ajax 请求
xhr.open('get', url);
xhr.send(null);
});
return p;
}
// 范文相应的资源
// 具体路径根据实际情况确定，并且需要完成一定的后台代码，这里暂不做详解
// 发送第一个请求
queryData('http://10.5.34.66:8104/test/getInfo')
.then(function(data){
// 第一个请求返回的数据
alert(data)
// 第一个请求完了后，发送第二个请求
return queryData('http://10.5.34.66:8104/test/getInfoOne');
})
.then(function(data){
// 第二个请求返回的数据
alert(data);
// 第二个请求完了后，发送第三个请求
return queryData('http://10.5.34.66:8104/test/getInfoTwo');
})
.then(function(data){
// 第三个请求返回的数据
// promise 是利用 then 函数的链式操作来处理回调地狱的问题
// 实际业务顺序中需要几个，就执行几次 then 操作，本例中为三
alert(data)
});
</script>
</body>
</html>
3.then 函数的参数与返回值
1.参数
then方法指定resolved状态和reject状态的回调函数
2.返回值
可以返回一个非promise对象；那么该 then 会产生一个默认的 promise 实例对象，为下次 then 链式操作做准备
可以返回一个promise对象；那么它的结果将会被下一个 then 的promise对象直接得到
4.Promise 常用实例API
- .then() ===> 得到异步任务正确的结果
- .catch() ===> 获取异常信息
- .finally() ===> 成功与否都会执行（不是正式标准）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
/*
Promise常用API-实例方法
*/
function foo() {
return new Promise(function(resolve, reject){
setTimeout(function(){
// 模拟访问成功
resolve('成功了');
// 模拟访问失败
// reject('出错了');
}, 100);
})
}
// foo()
// .then(
// // 成功时执行方法
// function(data){
// alert(data)
// })
// .catch(
// // 失败时执行方法
// function(data){
// alert(data)
// })
// .finally(
// // 无论成功与否都会执行
// function(){
// alert('访问结束')
// });
// --------------------------
// 两种写法是等效的
foo()
.then(
// 成功时调用的函数
function(data){
alert(data)
},
// 失败时调用的函数
function(data){
alert(data)
})
// 无论成功与否都会执行
.finally(
function(){
alert('访问结束')
});
</script>
</body>
</html>
5.Promise 基本实例API，常用对象API（静态方法）
.all()
并发处理多个异步任务，所有任务都执行完毕后才能得到最终结果
Promise.all() ===> 接受一个数组作参数，数组中的对象（p1、p2、p3）均为promise实例（如果不是一个promise，该项会被用 Promise.resolve 转换为一个promise)。它的状态由这三个promise实例决定
.race()
并发处理多个异步任务，只要有一个任务完成就能得到结果
Promise.race ===> 接受一个数组作参数。当p1, p2, p3中有一个实例的状态发生改变（变为 fulfilled 或 rejected ），p的状态就跟着改变。并把第一个改变状态的promise的返回值，传给p的回调函数
前端代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
/*
Promise常用API-对象方法
*/
function queryData(url) {
return new Promise(function(resolve, reject){
let 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);
});
}
// 定义三个异步任务
let p1 = queryData('http://10.5.34.66:8104/test/getInfo');
let p2 = queryData('http://10.5.34.66:8104/test/getInfoOne');
let p3 = queryData('http://10.5.34.66:8104/test/getInfoTwo');
Promise.all([p1,p2,p3]).then(function(result){
alert(result)
})
Promise.race([p1,p2,p3]).then(function(result){
alert(result)
})
</script>
</body>
</html>
后端代码（后端代码需要熟悉Java MVC 框架，并且需要其他配置，并不是仅仅下面一个类就可以完成的）：
package com.git.easyloan.rating.controller.test;
import org.springframework.web.bind.annotation.*;
@RestController
// @RequestMapping注释用于映射url到控制器类或一个特定的处理程序方法。可用于类或方法上。用于类上，表示类中的所有响应请求的方法都是以该地址作为父路径。
@RequestMapping(value="/test")
public class testController {
@PostMapping
public void save(){
}
@PatchMapping
public void editPatch(){
}
@GetMapping("getInfo")
public String list(){
return "this is the result";
}
@GetMapping("getInfoOne")
public String listOne(){
return "this is the one result";
}
@GetMapping("getInfoTwo")
public String listTwo(){
return "this is the two result";
}
@DeleteMapping
public void batchDelete(){
}
@DeleteMapping("/{id}")
public void delete(){
}
}
