前后端交互
- 前后端交互模式
- Promise用法
- 接口调用-fetch用法
- 接口调用-async/await用法
- 接口调用-async/await用法
接口调用方式
- 原生Ajax
- 基于jQuery的Ajax
- fetch
- axios
URL地址格式
-
传统形式的URL
- 格式：schema://host:port/path?query#fragment
- schema：协议。例如http、https、ftp等
- host：域名或者IP地址
- port：端口。http默认端口80，可以省略
- path：路径。例如/abc/a/b/c
- query：查询参数。例如uname=zhangsan&age=12
- fragment：锚点(哈希Hash),用于定位页面的某个位置
- 格式：schema://host:port/path?query#fragment
-
Restful形式的URL
- http请求方式
- GET：查询
- POST：添加
- PUT：修改
- DELETE：删除
- http请求方式
Promise用法
- 异步调用
- 异步效果分析
- 定时任务
- Ajax
- 事件函数
- 多次异步调用的依赖分析
多次异步调用的结果顺序不确定
-
异步调用的结果如果存在依赖需要嵌套
// 回调地狱，代码结构太复杂，想象一下就好
- 异步效果分析
Promise概述：Promise是异步编程的一种解决方案，从语法上将：从它可以获取异步操作的消息
使用Promise主要有以下好处
- 可以避免多层异步调用嵌套问题(回调地狱)
- Promise对象提供了简洁的API，使得控制异步操作更加容易
实例化Promise对象，构造函数中传递函数，该函数用于处理异步任务
-
resolve和reject两个参数用于处理成功和失败两种情况，并通过p.then获取处理结果var p = new Promise(function(resolve, rejected) { // 成功时调用 resolve() // 失败时调用 rejected() }); p.then(function(ret){ // 从resolve得到正常结果 }, function(ret){ // 从rejected得到错误信息 })
基于Promise处理Ajax请求
// 处理原生Ajax
function queryData(){
var p = new Promise(function(resolve, rejected){
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);
});
return p;
}
-
发送多次Ajax请求,并且保证顺序
queryData() .then(function(data){ return queryData(); }) .then(function(data){ return queryData(); }) .then(function(data){ return queryData(); }); -
then参数中的函数返回值- 返回Promise实例对象
- 返回的该实例对象会调用下一个
then
- 返回的该实例对象会调用下一个
- 返回普通值
- 返回的普通值会直接传递给下一个
then,通过then参数中函数的参数接收该值
- 返回的普通值会直接传递给下一个
- 返回Promise实例对象
Promise常用的API
-
实例方法
-
p.then()得到异步任务的正确结果 -
p.catch()获取异常信息 -
p.finally()成功与否都会执行(尚且不是正式标准)
queryData() .then(function(data){ console.log(data); }) .catch(function(data){ console.log(data); }) .finally(function(){ console.log('finished'); }); -
-
对象方法
-
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(f2) .then(f3) ... .catch(fn) -
fetch的基本语法
fetch('/abc').then(data => { return data.text(); }).then(ret=>{ // 这里得到的才是最终的数据 console.log(ret); })
-
fetch 请求参数
-
常用配置项
-
method(String):HTTP请求方法，默认为GET(GET、POST、PUT、DELETE) -
body(String):HTTP的请求参数 -
headers(Object):HTTP请求头，默认为{}
fetch('/abc', { method: 'get' }).then(data=>{ return data.text(); }).then(ret=>{ // 这里才是最终得到的数据 console.log(ret); }) -
-
GET请求方式的参数传递
```javascript fetch('/abc?id=123').then(data=>{ return data.text(); }).then(ret=>{ // 这里才是最终得到的数据 console.log(ret); }) ``` ```javascript fetch('/abc', { method: 'get' }).then(data=>{ return data.text(); }).then(ret=>{ // 这里才是最终得到的数据 console.log(ret); }) ``` -
DELETE请求方式的参数传递
fetch('/abc', { method: 'delete' }).then(data=>{ return data.text(); }).then(ret=>{ // 这里才是最终得到的数据 console.log(ret); }) -
POST请求的参数传递
fetch('/books', { method: 'post', body: 'uname=zhangsan&pwd=123', headers: { 'Content-Type': 'application/json' } }).then(data=>{ return data.text(); }).then(ret=>{ console.log(ret); });fetch('/books', { method: 'post', body: JSON.stringify({ uname: 'zhangsan', age: 12 }), headers: { 'Content-Type': 'application/json' } }).then(data=>{ return data.text(); }).then(ret=>{ console.log(ret); }); -
PUT请求参数的传递
fetch('/books', { method: 'put', body: JSON.stringify({ uname: 'zhangsan', age: 12 }), headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then(data=>{ return data.text(); }).then(ret=>{ console.log(ret); });
-
-
fetch 响应结果
-
text()：将返回体处理成字符串类型 -
json()：返回结果和JSON.parse(response)一样
fetch('/abc').then(data=>{ // return data.text(); return data.json(); }).then(ret=>{ console.log(ret); }) -
接口调用-axios
axios(官网：https://github.com/axios/axios) 是一个基于promise用于浏览器和node.js的HTTP客户端
-
它具有以下特性
- 支持浏览器和node.js
- 支持promise
- 能拦截请求和响应
- 自动转换JSON数据
-
基本用法
axios.get('/adata') .then(ret=>{ // data属性名称是固定的，用于获取后台响应数据 console.log(ret.data); })
axios常用的API
- get：查询数据
- post：添加数据
- put：修改数据
- delete：删除数据
axios的参数传递
-
GET传递参数
-
通过URL传递参数
axios.get('/adata?id=123') .then(ret=>{ console.log(ret.data); }) axios.get('/adata/123') .then(ret=>{ console.log(ret.data); }) -
通过params选项传递参数
axios.get('/adata',{ params: { id: 123 } }) .then(ret=>{ console.log(ret.data); })
-
-
DELETE传递参数
-
参数传递方式与GET类似
axios.delete('/adata?id=123') .then(ret=>{ console.log(ret.data); }) axios.delete('/adata/123') .then(ret=>{ console.log(ret.data); })axios.delete('/adata',{ params: { id: 123 } }) .then(ret=>{ console.log(ret.data); })
-
-
POST传递参数
-
通过选项传递参数(默认传递的是json格式的数据)
axios.post('/adata', { uname: 'tom', pwd: 123 }).then(ret=>{ console.log(ret.data) }) -
通过URLSearchParams传递参数(
application/x-www-form-urlencoded)const params = new URLSearchParams(); params.append('param1', 'value1'); params.append('param2', 'value2'); axios.post('/api/test', params).then(ret=>{ console.log(ret.data); })
-
-
PUT请求
-
参数传递方式与POST类似
axios.put('/adata', { uname: 'tom', pwd: 123 }).then(ret=>{ console.log(ret.data) })
-
axios 的响应结果
-
响应结果的主要属性
-
data：实际响应回来的数据 -
headers：响应头信息 -
status：响应状态码 -
statusText：响应状态信息
-
-
axios 的全局配置
-
axios.defaults.timeout=3000;超过时间 -
axios.defaults.baseURL='http://localhost:3000/app';默认地址 -
axios.defaults.headers['mytoken']= 'aqwerwqwerqwer2ewrwe23eresdf23'设置请求头
-
axios 拦截器
-
请求拦截器
- 在请求发出之前设置一些信息
// 添加一个请求拦截器 axios.interceptors.request.use(function(config) { // 在请求之前进行一些信息设置 return config; },function(err) { // 处理响应的错误信息 }); -
响应拦截器
- 在获取数据之前对数据做一些加工处理
// 添加一个响应拦截器 axios.interceptors.response.use(function(res) { // 在这里对返回的数据进行处理 return config; },function(err) { // 处理响应的错误信息 });
接口调用-async/await 的基本用法
-
async/await是ES7引入的新语法，可以更加方便地进行异步操作 -
async关键字用于函数上(async函数的返回值是Promise实例对象) -
await关键字用于async函数内部(await可以得到异步的结果)
async function queryData(id) {
const ret = await axios.get('/data');
return ret;
}
queryData.then(ret=>{
console.log(ret)
})
async/await处理多个异步请求
// 多个异步请求的场景
async function queryData(id) {
const info = await axios.get('/async');
const ret = await axios.get(`async2?info=` + info.data);
return ret;
}
queryData.then(ret=>{
console.log(ret);
})
