AJAX基础知识总结

new XMLhttpRequest() 创建给发送服务的方法
.open(‘请求方法’,’请求接口’) 创建给服务器发送的请求方法和接口
.send() 给服务器发送
loadend事件就是用来结束发送结束返回的结果
URLSearchParams(对象) 可以将对象的参数变成查询参数式字符串返回给新的变量
promise 的三种状态状态的转换 ,只能从 pending 变成其他两种不能从接收变成拒绝,从而知道同时调用两个就会执行最先调用的那一个状态改变,会调用相关的函数接收.then 拒绝.catch
创建时候是待定 pending(喷丁)
调用 resolve 是成功状态是 fulfilled(佛fail的)
调用 reject 是失败状态是 rejected
status http状态码 1xx 2xx 3xx 4xx 5xx
xhl.setHttpHeader(‘Content-Type’,’appliaction/json’) 修改请求头数据类型为json类型
new URLSearchParams（）转成每个属性中间为&隔开的转成计算机翻译的UTF-8 数据 toString（）转成字符串
请求体里面要加的数据写 data 里面 xhr.send（data数据的json字符串格式）

手写简单版的axios思路
1创建一个函数return一个 new Promise（（resolve,reject）=>{}）
2进行版判断传入数据中的属性有没有params 如果有就拼接到url上面用 new URLSearchParams（）.toString（）转换数据然后进行拼接 2.1进行判断有没有method属性，没有就默认为get
3创建小黄人 const xhr = new XMLHttpRequest（）
4 传入方法跟地址 xhr.open（method，url）
4判断有没有data 属性如果有了就改变请求头跟请求体
4.1改变请求头 xhr.setHttpHeader（‘Content-Type’，‘application/json’）
4.2改变请求体把data 写入的数据转换成 json格式放入 xml.send（data）

1.同步代码和异步代码

同步代码=>逐步执行代码,原地等待结果,才执行下一步

异步代码=>不阻塞代码运行,对其他事件做出反应而不必等待任务完成

2.回调函数地域

在回调函数一直向下嵌套回调函数,形成回调函数地域
问题
可读性差
异常捕获困难
耦合性严重

3.宏任务和微任务

宏任务:在浏览器的环境执行的异步代码
setInterval和setTimeout
在js脚本执行事件
AJAX请求完成事件
用户交互事件

微任务:在js引擎环境执行的异步代码
Promise对象.then()

4.Promise

作用
封装异步任务的API,可以返回异步任务的结果
then返回的是resolve(成功)的结果,catch返回的是reject(失败)的结果

语法

new Promise((resolve, reject) =>{
  // 该函数会立即执行, 可以在这里做一些异步任务
  setTimeout(() => {
    // 成功就调用 resolve()
    // 失败就调用 reject()
  }, 1000)
}).then(res => {
  // res 就是成功的结果
}).catch(e => {
  // e 就是失败的结果
})

案例_使用Promise+XHR_获取省份列表

5.Promise.all静态方法

概念
合并多个Promise对象,等待所有同时成功完成(或某一个失败),做后续逻辑
axios的返回结果就是promise
用法

const p=Promise.all([Promise对象,Promise对象,Promise对象,...])
p.then(result=>{
//result结果
}).catch(error=>{
//第一个失败的Promise对象,抛出的异常
})

相关案例
业务：当我需要同一时间显示多个请求的结果时，就要把多请求合并

6.asnyc和await的使用

解决回调函数地狱问题
注意点:两者必须一起使用,获取Promise对象成功状态的结果值

用法:

asnyc function render(){
	//res是访问服务器后返回的结果
	const res=await axios({
	url:'网址',	
	method:'请求方法',
	params:{参数}
	})
//得到res后可以渲染页面
console.log(res)
}
render()