Ajax概念
该文章总结了ajax知识+axios请求的发送+Promise+事件循环+文件上传等知识
1. 前后端交互流程
浏览器发送请求
服务器处理请求
服务器响应数据
2. ajax
是什么？在页面不刷新的情况下，向服务器请求数据
作用：页面的局部刷新
3. 接口文档三要素
url：统一资源定位符method：请求方法
请求参数：浏览器发给服务器的额外参数
4. 浏览器访问服务器的4种方式
直接在浏览器中输入网址
标签href，src属性location.href = '网址'ajax技术
5.url组成部分
是什么？统一资源定位符
协议 域名 端口号 资源存放路径
6. HTTP协议
是什么?网络传输协议
作用：约定浏览器数据格式
组成部分：请求报文和响应报文
6.1请求报文
是什么？浏览器发送给服务器的数据的格式 请求行+请求头+请求体
请求行：请求方法+URL
请求头：浏览器发送的数据格式，有json格式和文件格式
请求体：send中请求的参数
6.2响应报文
是什么？服务器响应浏览器数据的格式 响应行+响应头+响应体
响应行：响应状态码，服务器IP
响应状态码
2xx 请求成功
3xx 重定向(服务器主动修改浏览器地址) 302重定向
4xx 前端出错
400参数错误
401未验证(用户未登录)
403没有权限(用户没有权限访问，例如vip功能)
404响应行错误
413文件大小超出限制
5xx 服务器出错(后端出错)
502服务器维护响应头：服务器响应的数据格式
响应体：response 响应回来的数据
7. get和post区别
1.传参方式不同
get：直接url后面拼接(请求行)，url发送过去了，那么参数就过去了
post：请求体中传输，会切片，数据流传输
2.传参速度不同
get速度快
3.数据大小不同
get有大小限制
post没有大小限制，想传多少传多少
4.安全性不同
get是一次性传输，数据容易被一次性拦截，安全性低
post由于切片，数据一点一点的传，安全性高
Ajax代码流程
原生XMLHttpRequest工作流程
作用：发送ajax请求的 请求request 响应response
流程
1.创建XML对象实例
2.设置请求
3.发送请求
4.注册回调函数
//示例
//创建xhr实例
const xhr = new XMLHttpRequest()
//设置请求
xhr.open(‘请求方式’,'url地址')
//发送请求
xhr.send()
//注册响应事件
xhr.onload = function() {
console.log(xhr.responseText)
}注意点
1.get请求get方法进行传参，例如： xhr.open('请求方式','url地址？参数名=参数值')
2.post请求
post方法进行传参，需要把参数写在xhr.send()中
第一步：设置一个固定的请求头xhr.setRequestHeader(...)
第二步：xhr.send('参数名=参数值&参数名=参数值')
axios第三方库工作流程
1.基地址
axios.defaults.baseURL = '基地值'简化url，axios会自动拼接
注意：基地址只能设置一个
2.ajax请求数据的5种方式
增post
删delete
改：
全局改put
局部改path
查get三种传参方式：请求行传参：axios.delete('路径', { params:{ 参数名:参数值} } )请求体传参：axios.delete('路径', { data:{ 参数名:参数值} } )路径参数：axios.delete('url路径/参数值')
主要是看接口文档
发送axios方式1
axios({
method:'请求方法',
url:'请求路径',
params:{参数名:‘参数值’ (get参数)},
data:{
属性名：‘属性值’,
属性名：‘属性值’
(post参数)}
}).then(res=>{
成功的回调
}).catch(error=>失败的回调 error就是错误的信息)注意：1.在axios中，res并不是服务器响应的数据，而是axios自己包的对象2.res.data:真正的服务器响应的数据3.then方法底层自动给你转JSON4.方法是get，可以省略不写
发送axios方式2
发送get请求
axios.get('请求路径',{params:{get参数}}).then(res=>{})发送post请求
axios.post('请求路径',{post参数}).then(res=>{})文件上传FormData()
步骤：
给file表单注册一个change事件
1.获取文件数据：this.files[0]
2.使用formdata处理文件
const fd = new FormData()
fd.append('参数名‘，参数值)
a.修改请求头为文件格式
b.把file对象转化成二进制
3.发送ajax请求，参数就是fd
4.服务器响应图片地址，赋值给img标签src属性document.querySelector('.upload').addEventListener('change',
function() {
const fd = new FormData()
fd.append('img',this.files[0])
axios.post('http://hmajax.itheima.net/api/uploadimg',fd)
.then(res=>{
document.querySelector('.my-img').src = res.data.data.url
})
})文件预览步骤
文件预览: 给file表单注册一个change事件
1.获取文件数据 this.files[0]2.内置对象把file转成url URL.createObjectURL( file对象 )
3.把本地url赋值给img标签src属性
promise
是什么？本质是一个构造函数，里面保存着某个未来才会结束的事件
作用：解决回调地狱
如何解决？(方法1，现在基本不用这种方法，下面会说新的方法)promise是通过链式调用来解决回调地狱链式调用：在上一个then里面，返回下一个promise实例，就可以在后面继续.then
promise的工作原理
promise原理：
(1)promise对象有三个状态.
a. pending（进行中）
b. fulfilled（已成功）
c. rejected（已失败）
(2)Promise对象的状态改变， 只有两种可能：
a. resolve()：从pending变为fulfilled
b. 执行 reject()：从pending变为rejected
(3)promise在创建实例的时候,里面的代码会立即执行.
promise自己是同步的,只有then方法才是异步的
promise其他语法
静态方法Promise.all([p1,p2,p3])Promise.all() : 将多个promise合并成一个,等待所有promise全部执行完毕才会执行then
const p = Promise.all([p1,p2,p3])
p.then(res=>{
console.log(res) //返回的数组
}).catch(error=>{
console.log(error)
}).finally(()=>{
console.log('完成')
})静态方法Promise.race([p1,p2,p3])Promise.race(): 将多个promise合并成一个,谁先成功，promise执行完毕就执行then，如果有一个失败，则会走catch
const p4 = Promise.race([p1,p2,p3])
p4.then(res=>{
console.log(res)
}).catch(error=>{
console.log(error)
}).finally(()=>{
console.log('完成')
}).then().cath().finally()
async异步函数
async / await
async作用：修饰函数，让函数内部使用await
await 作用：取代then 并且拿到then的结果 他仅仅只是取代了promise中的then , 而未取代catch
//语法
async function 函数名() {
const res = await p
}
函数名()await和promise互换
const res = await 后面的代码
下面的代码
new promise(resolve,reject)=>{
resolve(后面的代码)
}).then(res=>{
下面的代码
})axios底层原理
当我们掌握promise和ajax请求的发送，你就可以大概的写出axios的底层了
axios底层原理 : promise + XMLHttpRequest
(1)axios方法本质是返回一个Promise对象
(2)promise内部是原生XHR发送Ajax请求
(3)请求成功用resolve返回给Promise对象结果给外面then
//写一个类似于axios的get方法
const lywaxios = {
get(url) {
return new promise((resolve,reject)=>{
const xhr = new XMLHttpRequest()
xhr.open('get',url)//拿到形参url
xhr.send()
xhr.onload = function() {
resolve(JSON.parse(xhr.response))
}
})
}
}
//调用1
async function fn() {
const res = await lywaxios
.get('http://123.57.109.30:3999/api/categoryfirst')
console.log(res)
}
//调用2
lywaxios.get('http://123.57.109.30:3999/api/categoryfirst')
.then(res=>console.log(res))你看看调用方式2是否与你使用的axios有点相似
try/catch
Error()对象 内置对象，错误信息
throw关键字 抛出异常，可以让控制台变红。throw错误信息
try{
throw '错误信息'
}catch(error){
console.log(error)
}finally{
//无论成功或失败都会执行
}场景
结束forEach循环
捕捉await错误信息
事件循环
异步代码
微任务 promise的then await下面的代码
宏任务 script标签 事件处理 函数定时器 ajax
js是一门单线程的语言
所有的同步任务都在主线程上执行，行成一个执行栈。
除了主线程之外，还存在一个任务列队，只要异步任务有了运行结果，就在任务列队中植入一个时间标记。
主线程完成所有任务(执行栈清空），就会读取任务列队，先执行微任务队列在执行宏任务队列。
重复上面三步。
只要主线程空了，就会读取任务列队，这就是js的运行机制，也被称为 event loop（事件循环）
