1.前后端交互模式
1.1 接口调用方式
列举
-
原生ajax
-
基于jq的ajax
-
fetch
-
axios
1.2 URL地址格式
1.传统形式的URL
-
格式: scheme://host:port/path?query#fragment
-
协议://域名:端口/路径?参数#锚点(哈希Hash)
2.Restful形式的URL
HTTP请求方式
GET 查询
POST 添加
PUT 修改
DELETE 删除
符合规则的URL地址
http://www.hello.com/books/123
2.Promise的相关概念和用法
2.1 异步调用
-
异步效果分析
-
1.定时任务
-
2.Ajax
-
3.事件函数
-
-
多次异步调用的依赖分析
-
多次异步调用的结果顺序不确定
-
异步调用的结果如果存在依赖需要嵌套
-
2.2 Promise概述
Promise 是异步编程的一种解决方案,从语法上讲,Promise是一个对象,从它可以获取异步操作的消息.
-
避免多层异步调用嵌套问题（回调地狱）
-
promise对象提供简洁的API，使得控制异步操作更加容易
2.3 Promise 基本用法
-
实例化Promise对象，构造函数中传递函数，该函数中用于处理异步任务
-
resolve和reject 两个参数用于处理成功和失败的情况，通过p.then获取处理结果
1.如何定义一个promise实例
我们使用new来构建一个Promise Promise的构造函数接收一个参数，是函数，并且传入两个参数： resolve，reject， 分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数 Promise实例生成以后，可以用then方法指定resolved状态和reject状态的回调函数
演示
2.4 基于promise处理Ajax请求
2.5 then参数中的函数返回值
1.返回Promise实例对象
- 返回的该实例对象会调用下一个then
2.6 Promise 基本API
1.实例方法
.then()- 得到异步任务正确的结果
.catch()- 获取异常信息
.finally()- 成功与否都会执行 （不是正式标准）
2.对象方法
- .all()
Promise.all 方法接受一个数组作参数，数组中的对象（p1、p2、p3）均为promise实例（如果不是一个
promise，该项会被用 Promise.resolve 转换为一个promise)。它的状态由这三个promise实例决定
- .race()
Promise.race 方法同样接受一个数组作参数。当p1, p2, p3中有一个实例的状态发生改变（变为 fulfilled
或 rejected ），p的状态就跟着改变。并把第一个改变状态的promise的返回值，传给p的回调函数
Promise.all ([p1,p2,p3]).then((result) => {
console.log (result)
}
Promise.race( [p1, p2,P3]).then((result) => {
console.log (result)
}
3. fetch
3.1 fetch基本使用
基于Promise实现
3.2 fetch请求参数
- 常用配置选项
-
method(String):HTTP请求方法，默认为GET
-
body(String):HTTP请求参数
-
headers(Object)：HTTP的请求头,默认为{}
2.get请求方式参数传递
// 第一种方式
// fetch('http://127.0.0.1:8080/books?id=123', {
// method: 'get'
// })
// .then(function(data) {
// // text()属于fetch APi中的一部分，返回一个promise实例对象,用于获取返回的数据
// return data.text()
// })
// .then(function(data) {
// // then 解析
// console.log(data);
// })
//第二种方式 restful风格
fetch('http://127.0.0.1:8080/books/1234', {
method: 'get'
})
.then(function(data) {
// text()属于fetch APi中的一部分，返回一个promise实例对象,用于获取返回的数据
return data.text()
})
.then(function(data) {
// then 解析
console.log(data);
})
3.post请求方式参数传递
fetch('http://127.0.0.1:8080/books/789', {
method: 'delete'
})
.then(function(data) {
// text()属于fetch APi中的一部分，返回一个promise实例对象,用于获取返回的数据
return data.text()
})
.then(function(data) {
// then 解析
console.log(data);
})
4.put请求方式参数传递
fetch('http://127.0.0.1:8080/books/123', {
method: 'put',
body: JSON.stringify({
uname: 'lisi',
pwd: '456'
}),
headers: {
'Content-Type': 'application/json'
}
})
.then(function(data) {
return data.text();
}).then(function(data) {
console.log(data)
});
3.3 fetch响应结果
响应数据格式
-
text():将返回体处理成字符串类型
-
json(): 返回结果和JSON.parse(responseText)一样
4.axios的语法
4.1 axios的基本特性
-
支持浏览器和node.js
-
支持promise
-
能拦截请求和响应
-
自动转换JSON数据
4.2 axios的基本语法
1.get和 delete请求传递参数
- 通过传统的url 以 ? 的形式传递参数
- restful 形式传递参数
- 通过params 形式传递参数
2.post 和 put 请求传递参数
-
通过选项传递参数
-
通过 URLSearchParams 传递参数
演示
axios.get('/adata')
. then (ret=> {
// data属性名称是固定的，用于获取后台响应的数据
console.1og (ret. data )
})
4.3 axios的常用API
1.get和 delete请求传递参数
-
通过传统的url 以 ? 的形式传递参数
-
restful 形式传递参数
-
通过params 形式传递参数
2.post 和 put 请求传递参数
-
通过选项传递参数
-
通过 URLSearchParams 传递参数（表单）
4.4 axios的响应结果
响应结果的主要属性
-
data：实际响应回来的数据
-
headers:响应头信息
-
status：响应状态码
-
statusText：响应状态信息
4.5 axios的全局配置
-
axios.defaults.timeout = 3000; //超时时间
-
axios.defaults.baseURL = 'ttp://127.0.0.1:8080/app'; //默认地址
-
axios.defaults.headers[ 'mytoken' ]= 'aqwerwqwerqwer2ewrwe23eresdf23' // 设置请求头
演示
4.6 axios拦截器
1.请求拦截器
-
请求拦截器的作用是在请求发送前进行一些操作
-
例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易
2.响应拦截器
-
响应拦截器的作用是在接收到响应后进行一些操作
-
例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页
5.1 接口调用 async/await语法
-
async作为一个关键字放到函数前面，任何一个
async函数都会隐式返回一个promise -
await关键字只能在使用async定义的函数中使用， await后面可以直接跟一个 Promise实例对象，不能单独使用 -
async/await 让异步代码看起来、表现起来更像同步代码**
await函数不能单独使用，而且async函数返回的是一个Promise对象，可以使用then函数添加回调函数。当函数执行的时候，一旦遇到await函数就会先返回一个Promise对象，等到异步操作完成，再去执行后面的语句
演示
5.2 async/await 处理多个异步请求