前后端交互，即前端和后端的互动，前端需要获取（get）的数据，获取上传（post）的数据，前端发送请求，后端接收到请求后，便进行对数据库的操作，返回前端所需数据，完成一次前后端交互
1.前后端交互模式
（1）调用接口方式
- 原生ajax
- 基于jquery的ajax
- fetch
- axios
（2）url地址格式
- 传统url形式
schema://host:port/path?query#fragment
- Restful形式url
2.Promise用法
（1）异步调用
- 定时任务
- ajax
- 事件函数
- 多次异步调用的结果顺序不确定
- 异步调用结果存在依赖需要嵌套
（2）promise
异步编程的一种解决方法
好处：
- 可以避免多层异步调用嵌套问题（回调地狱）
- promise对象提供了简洁的API，使得控制异步操作更容易
（3）基本用法
var p = new promise (function(resolve, reject){
//成功时调用 resolve()
//失败时调用reject()
});
p.then(function(ret){
//从resolve中得到正常结果
}, function(ret) {
//从reject中得到错误信息
});
（4）基于promise处理ajax请求
- 处理原生ajax
function queryData() {
return new promise(function(resolve, reject){
var xhr = new XMLHttpRequest();
xhr.onreadyStatechange = function() {
if(xhr.readystate != 4) return;
if(xhr.status == 200) {
resolve (shr.responseText)
} else {
reject('出错了');
}
}
xhr.open('get', '/data');
xhr.send(null);
})
}
- 发送多次ajax请求
queryData()
.then(function(data){
return queryData();
})
.then(function(data){
return queryData();
})
.then(function(data){
return queryData();
});
（5）then参数中的函数返回值
- 返回promise实例对象
返回的该实例对象会调用下一个then
- 返回普通值
返回值会传递给下一个then，通过then参数中函数的参数接收该值
（6）promise常用的API
- 实例方法
p.then()得到异步任务的正确结果
p.catch()获取异常信息
p.finally()成功与否都会执行
queryData()
.then(function(data){
console.log(data);
})
.catch(function(data){
console.log(data);
})
.finally(function(data){
console.log(data);
});
- 对象方法
promise.all()并发处理多个异步任务，所有任务都执行完成才得到结果
promise.race()并发处理多个异步任务，只要有一个任务完成技能得到结果
promise.all([p1, p2, p3]).then(result => {
console.log(result)
})
promise.race([p1, p2, p3]).then(result => {
console.log(result)
})
3.接口调用-fetch用法
fetch的返回格式采用的是promise分格，因此可以fetch（‘‘地址’’）.then()之后可以一直then()，.then方法返回的也是promise
fetch的错误抛出：fetch不会对400等错误抛出promise分格的异常，除非断网，因此需要手动判断我们的请求结果是否正常，出现异常时，手动throw new error('错误')就会被promise的reject捕捉抛出异常
（1）fetch概述
语法：fetch(url).then(fn2)
.then(fn3)
...
.catch(fn)
（2）基本用法
fetch('/abc').then(data => {
return data.text();
}).then(ret => {
console.log(ret); //得到最终数据
});
（3）fetch请求参数
- 常用配置项
fetch('/abc', {
method: 'get' //http请求方式，默认为get
}).then(data => {
return data.text();
}).then(ret => {
console.log(ret);
});
- GET请求方式的参数传递
fetch('/abc?id=123')...
fetch('/abc/123', {method: 'get' ......
- DELETE请求方式传参
fetch('/abc/123', method: 'delete' ......
- POST请求方式传参
fetch('/book', {
mothod: 'post',
body: 'uname = off&age = 31',
header: {
'content-Type' : 'application/x-www-form-uelencoded',
}
}).then()......
- PUT请求方式传参
fetch('/book/123', {
mothed: 'put',
body:JSON.stringify({
uname:'off',
age:31
})
header: {
'content-Type':'application/json',
}
}).then()......
（4）响应结果
响应数据格式
text():将返回体处理成字符串类型
json():返回结果和JSON.parse(responseText)一样
标签：function,异步,console,data,前后,promise,交互,fetch From： https://www.cnblogs.com/qqlzs/p/16858214.html