目录
前后端交互流程 浏览器发送数据 服务器响应数据ajax技术: 浏览器和服务器的交互ajax概念: 浏览器在不刷新网页的情况下,向服务器请求数据(前后端交互)接口文档三要素:
Ajax概念
前后端交互流程 浏览器发送数据 服务器响应数据
ajax技术: 浏览器和服务器的交互
ajax概念: 浏览器在不刷新网页的情况下,向服务器请求数据(前后端交互)
接口文档三要素:
1.url:统一定位符,简称网址 协议名://域名/路径
2.method:请求方法,资源操作
2.1 get 获取
2.2 post 新增
2.3 delete 删除
2.4 put 修改
HTTP协议(网络传输协议)
1.请求报文
1.1 请求行
(1)请求路径:url
(2)请求方法:method请求方法
1.2 请求头(前端请求体格式 Content-Type)
(1) json格式：application/json
(2) 文件格式：multipart/form-data
1.3 请求体:请求参数
2.响应报文
1.1 响应行 (服务器ip地址 + 状态码status)
状态码status
(1)2xx : 成功
200成功
(2)3xx : 重定向
302 重定向
(3)4xx : 前端问题
400 参数错误
401 未认证(没登录)
403 没有权限
404 请求行错误
413 文件大小超过限制
(4)5xx : 服务器问题
500服务器内部错误
1.2 响应头:后端响应体格式 Content-Type
1.3 响应体:响应数据
get与post区别
1.传参方式不同: get 请求行传参,post请求体传参
2.速度不同: get比post传输更快
3.大小不同:get有大小限制(2-4kb),post没有大小限制
4.安全性不同: post比get安全
输入url到呈现到页面的过程
1.DNS解析
2.建立TCP连接:安全可靠的网络传输协议 (三次握手)
3.HTTP连接: 网络传输
4.浏览器开始渲染页面
5.Tcp断开(四次握手)
axios
axios是常用的ajax技术第三方库
第一种写法:
axios( {
url:'网址'
method:'请求方法'
params:{ get参数 }
data:( post参数 )
} ).then( res => {
//res就是服务器返回的数据
} ).catch(error=>{
//错误:error就是错误信息
})
注意:post参数和get参数只能二选一
第二种写法:请求别名
查询数据: get
查询参数：axios.get('路径',{params:{参数名:参数值}})
路径参数：axios.方法名('url路径/参数值)
新增数据： post
全局更新数据: put
局部更新数据: patch
post请求体传参
axios.方法名('路径',{参数名:参数值})
删除数据: delete
请求行传参：axios.delete('路径',{params:{参数名:参数值}})
请求体传参： axios.delet('路径',{data:{参数名:参数值}})
XMLHttpRequest
原生ajax请求，也是ajax技术底层原理
（1）创建xhr对象
const xhr = new XMLHttpRequest()
（2）设置请求方法和地址
xhr.open(方法,地址)
（3）发送请求
xhr.send()
（4）注册响应事件
xhr.addEventListener('loadend',function(){
console.log(xhr.response)
} )
get参数和post参数
get参数请求行:url?参数名=参数值
post参数请求体:xhr.send(json格式)
post需要设置请求头:xhr.setRequestHeader('Content-Type','application/json;charset=utf8')
文件预览与文件上传
文件上传:给file表单注册一个change事件
(1) 获取文件数据 this.files[0]
网络图片: 把file发给服务器,服务器给你一个图片http网址
(2) 使用formdata处理文件
const fd = new FormData()
fd.append('参数名',参数值)
a.修改请求头的文件格式
b.把file对象转成二进制
(3) 发送ajax请求,参数就是fd
(4) 服务器响应图片网址,赋值给img标签src属性
文件预览:给file表单注册一个change事件
(1) 获取文件数据 this.files[0]
(2)本地图片: 生成本地blob网址 URL.createObjectURL(file对象)
(3)把本地url赋值给img标签src属性
拓展: <input type:'file multiple>
加入 multiple 文件就可以多选
Promise
05-Promise
1.promise是什么 ：ES6新增的构造函数
2.promise作用： 解决回调地狱
回调地狱 : 异步回调,层层嵌套
3.promise语法
(1)创建promise实例对象
(2)调用promise实例的then方法
new promise((resolve,reject)=>{
//异步操作:进行中(默认)
// 进行中 -> 已完成
resolve(结果)
// 进行中 -> 已失败
reject(错误信息)
})
promise实例.then(res=>{ }).catch(error=>{})
4.promise原理
promise有 三种 种状态
默认情况下，promise状态为： pending(进行中) 。 此时promise中的代码会 立即执行
promise的状态改变只有 成功和失败 两种情况
进行中(pending) 到 已完成(fulfilled)
进行中(pending) 到 已失败(rejected)
promise内部使用 resolve() 和 reject(错误信息) 方法来修改状态
如果是成功状态，则会执行promise实例对象的 then() 方法。 如果是失败状态， 则会执行 promise实例对象的 catch() 方法
5.promise常用方法
5.1 Promise.all()
(1).把多个promise合并成一个新的promise
(2).所有的promise都成功就会执行then(then结果是个数组)
5.2 Promise.race()
(1).把多个promise合并成一个新的promise,所有promise完成,就会执行then,then结果就是最 快的promise的结果(取其一)
注意: 使用新的promise方法时,then方法后面可以加catch,catch方法后面还有finally(),意思是不 管怎么样只要promise执行我都会走
async异步函数
1.语法
async function 函数名 () {
const res = await promise对象
}
2.await工作原理
(1) 执行then
(2) 得到then的结果
3.await和promise互换
awit写法: const res = await 后面代码
下面代码
promise写法: new Promise( (resolve,reject)=> {
resolve(后面代码)
}).then( res=>{
下面代码
} )
EventLoop事件循环
1.异步代码:
(1)微任务
promise的then
await 下面代码
(2) 宏任务
script标签
事件处理函数
定时器
ajax
2.什么是事件循环 ：事件循环(Ewent Loop)是什么 :js编译器“解析与执行》代码的一种规则1.js 代码分为两大类:同步:异步:异步宏:script标签、事件处理函数、定时器回调、ajax回调异步 微:promise.then() await/async
简单来说:js代码的执行机制
2.事件循环流程
（1）(1)先“解析'默认script标签,进入第一个宏任务(默认宏)
（2）判断代码是同步还是异步
（3）如果是同步:立即“执行
（4）如果是异步: 微任务放入微队列， 宏任务放入宏队列
（5）当前同步执行完毕之后，开始执行异步队列
（6）先清空微任务队列，之后再“解析’宏任务队列，此时完成一次事件循环
(7) 按照以上步骤反复解析执行每一个宏任务《事件循环就是按照相同的规则反复循环解析 执行代码>
1529
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
