XMLHttpRequest && Promise
XMLHttpRequest的基本用法
1、是浏览器内置的一个构造函数
2、作用:基于new出来的XMLHttpRequest实例对象。可以发起Ajax的请求
3、使用XMLHttpRequest发起请求
【1、1. 创建xhr对象
{ const xhr = new XMLHttpsRequest()}
2、2. 调用xhr.open()函数
{一、xhr.open('get', 'url地址?name=ashu&age=18') //get请求携带查询参数
二、xhr.open('post', 'http://www.liulongbin.top:3009/api/post')
// 3.post请求设置请求体对应的编码格式 对应的是key=value&key=value
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')}
3、3. 调用xhr.send()函数
{一、get请求:xhr.send()
二、post请求:xhr.send(请求体数据)
xhr.send('uname=ccc&age=30')}
4、4. 监听load事件
{ xhr.addEventListener('load', function() {
console.log(xhr.response)
}) //拿回数据}】
数据交换格式
Promise
异步函数和回调函数的说明
一、异步函数:setTimeout、setInterval、ajax
异步函数的执行由于是异步的,不会阻塞主线程代码的执行
二、回调函数:将一个函数A作为参数 传递给另一个函数B 函数A就是回调函数
存在问题:1. 回调函数不会立刻执行,阅读性不好
2. 回调函数一旦大量嵌套,可维护性差
解决方法:promise
promise的基本语法
一、创建promise对象
const p = new Promise((resolve,reject) => {
// promise内部一般可以封装一个异步操作
// resolve, reject 是promise内部提供给你的两个函数
// 成功调用 resolve
// 失败调用 reject
})
二、使用promise对象
p.then(res => {... //处理成功
}) .catch(res => {...}) //处理失败
三种状态
一、pending:等待(进行中):默认状态
二、fulfilled: 成功 (已完成):调用了 resolve 函数, promise的状态就会被标记成成功
三、rejected: 失败 (拒绝):调用了 reject 函数, promise的状态就会被标记成失败
四、一旦promise的状态发生变化, 状态就会被凝固
promise常用静态方法
Promise.all() 等待机制
语法:Promise.all([ promise1, promise2, ... ]).then( ... )
特征:发起并行的promise异步操作,会等待所有的异步操作都完成,才会走 .then
Promise.race() 赛跑机制
语法:Promise.race([ promise1, promise2, ... ]).then( ... )
特征:发起并行的promise异步操作,只要任何一个异步操作完成,就会走 .then
案例-封装自己的Ajax函数
index-明确需求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btnGet">发送get请求</button>
<button id="btnPost">发送post请求</button>
<script>
// GET http://www.liulongbin.top:3009/api/get
// POST http://www.liulongbin.top:3009/api/post
// 提供myAxios来实现发送ajax请求 ajax 异步操作 ==> 需要使用promise来封装ajax异步代码
function myAxios({ method, url, params, data }) {
// 记得将promise实例对象给返回出去
return new Promise((resolve, reject) => {
// 在这写ajax异步代码
// ....
console.log(method, url, params, data)
})
}
// 发送get请求
document.querySelector('#btnGet').addEventListener('click', function () {
// 使用自己封装的ajax函数来发送请求
myAxios({
method: 'get',
url: 'http://www.liulongbin.top:3009/api/get',
params: {
name: 'lw',
age: 19
}
}).then((res) => {
console.log(res) // 服务器响应结果
})
})
// 发送post请求
document.querySelector('#btnPost').addEventListener('click', function () {
// 使用自己封装的ajax函数来发送请求
myAxios({
method: 'post',
url: 'http://www.liulongbin.top:3009/api/post',
params: {
name: 'lw',
age: 19
},
data: {
a: 1,
b: 2
}
}).then((res) => {
console.log(res) // 服务器响应结果
})
})
</script>
</body>
</html>
index-发送请求和处理响应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btnGet">发送get请求</button>
<button id="btnPost">发送post请求</button>
<script>
// GET http://www.liulongbin.top:3009/api/get
// POST http://www.liulongbin.top:3009/api/post
// 提供myAxios来实现发送ajax请求 ajax 异步操作 ==> 需要使用promise来封装ajax异步代码
function myAxios({ method, url, params, data }) {
// 记得将promise实例对象给返回出去
return new Promise((resolve, reject) => {
// 在这写ajax异步代码
// ....
// console.log(method, url, params, data)
// 发送请求 + 处理响应
// 原生xhr
// 1. 创建出来xhr对象
// 2. 方式、url地址 ==> open()
// 3. send(请求体数据) 发送请求
// 1.
let xhr = new XMLHttpRequest()
// 2.
xhr.open(method, url)
// 3.
xhr.send()
// 处理响应
xhr.addEventListener('load', function () {
// console.log(xhr.response) // 服务器响应结果
// 把promise实例对象的状态改成成功fulfilled
resolve(JSON.parse(xhr.response)) // 把服务器响应的json字符串数据给反序列化下
})
// 监听 error 事件 处理请求失败
xhr.addEventListener('error', function () {
reject('网络异常,请求失败,请稍后重试~~~')
})
})
}
// 发送get请求
document.querySelector('#btnGet').addEventListener('click', function () {
// 使用自己封装的ajax函数来发送请求
myAxios({
method: 'get',
url: 'http://www.liulongbin.top:3009/api/get',
params: {
name: 'lw',
age: 19
}
}).then((res) => {
console.log(res) // 服务器响应结果 js对象 方便去操作
}).catch((err) => {
alert(err)
})
})
// 发送post请求
document.querySelector('#btnPost').addEventListener('click', function () {
// 使用自己封装的ajax函数来发送请求
myAxios({
method: 'post',
url: 'http://www.liulongbin.top:3009/api/post',
params: {
name: 'lw',
age: 19
},
data: {
a: 1,
b: 2
}
}).then((res) => {
console.log(res) // 服务器响应结果
})
})
</script>
</body>
</html>
index-处理params
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btnGet">发送get请求</button>
<button id="btnPost">发送post请求</button>
<script>
// GET http://www.liulongbin.top:3009/api/get
// POST http://www.liulongbin.top:3009/api/post
// 提供myAxios来实现发送ajax请求 ajax 异步操作 ==> 需要使用promise来封装ajax异步代码
function myAxios({ method, url, params, data }) {
// 记得将promise实例对象给返回出去
return new Promise((resolve, reject) => {
// 在这写ajax异步代码
// ....
// console.log(method, url, params, data)
// 发送请求 + 处理响应
// 原生xhr
// 1. 创建出来xhr对象
// 2. 方式、url地址 ==> open()
// 3. send(请求体数据) 发送请求
// 1.
let xhr = new XMLHttpRequest()
// 在open之前,对params查询参数做个处理
// console.log(params)
if (params) {
// if成立,表示params对象是存在的
// console.log('if成立,表示params对象是存在的,才有必要把params对象处理成键值对字符串,放到url地址后面')
let arr = []
for (let k in params) {
arr.push(`${k}=${params[k]}`)
}
console.log(arr.join('&')) // name=lw&age=19
// 把键值对字符串拼接到url地址后面,并使用 ? 隔开
url += `?${arr.join('&')}` // url = url + ?name=lw&age=19
}
// 2.
xhr.open(method, url)
// 3.
xhr.send()
// 处理响应
xhr.addEventListener('load', function () {
// console.log(xhr.response) // 服务器响应结果
// 把promise实例对象的状态改成成功fulfilled
resolve(JSON.parse(xhr.response)) // 把服务器响应的json字符串数据给反序列化下
})
// 监听 error 事件 处理请求失败
xhr.addEventListener('error', function () {
reject('网络异常,请求失败,请稍后重试~~~')
})
})
}
// 发送get请求
document.querySelector('#btnGet').addEventListener('click', function () {
// 使用自己封装的ajax函数来发送请求
myAxios({
method: 'get',
url: 'http://www.liulongbin.top:3009/api/get',
params: {
name: 'lw',
age: 19
}
}).then((res) => {
console.log(res) // 服务器响应结果 js对象 方便去操作
}).catch((err) => {
alert(err)
})
})
// 发送post请求
document.querySelector('#btnPost').addEventListener('click', function () {
// 使用自己封装的ajax函数来发送请求
myAxios({
method: 'post',
url: 'http://www.liulongbin.top:3009/api/post',
params: {
name: 'lw',
age: 19
},
data: {
a: 1,
b: 2
}
}).then((res) => {
console.log(res) // 服务器响应结果
})
})
</script>
</body>
</html>
对象处理成字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
let params = {
a: 1,
b: 2,
c: 3
}
// 需求:将params对象的键值对处理成 键值对的字符串 'a=1&b=2&c=3'
// 拆解
// 1. 对象 ==> 数组 ['a=1', 'b=2', 'c=3']
// 2. 把上面的数组变字符串 ['a=1', 'b=2', 'c=3'].join('&') 结果是 'a=1&b=2&c=3'
// 步骤:
// 1. 准备好一个空数组 []
// 2. for...in 遍历对象 把对象中的键 和 值 添加到数组中 难度😫
// 3. 数组使用join
// 1.
let arr = []
// 2.
for (let key in params) {
console.log(key, params[key])
// arr.push(`a=1`) // ['a=1', 'a=1', 'a=1']
// 把键和值给push添加到arr数组中
arr.push(`${key}=${params[key]}`)
}
console.log(arr) // ['a=1', 'b=2', 'c=3']
console.log(arr.join('&')) // 'a=1&b=2&c=3'
</script>
</body>
</html>
处理fd和键值对字符串数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btnGet">发送get请求</button>
<button id="btnPost">发送post请求</button>
<button id="btnPost2">发送FormData请求</button>
<button id="btnPost3">发送键值对字符串请求</button>
<script>
// GET http://www.liulongbin.top:3009/api/get
// POST http://www.liulongbin.top:3009/api/post
// 提供myAxios来实现发送ajax请求 ajax 异步操作 ==> 需要使用promise来封装ajax异步代码
// 给method 设置默认值为get,这样method没有指定的时候,默认发get请求
function myAxios({ method = 'get', url, params, data }) {
// 记得将promise实例对象给返回出去
return new Promise((resolve, reject) => {
// 在这写ajax异步代码
// ....
// console.log(method, url, params, data)
// 发送请求 + 处理响应
// 原生xhr
// 1. 创建出来xhr对象
// 2. 方式、url地址 ==> open()
// 3. send(请求体数据) 发送请求
// 1.
let xhr = new XMLHttpRequest()
// 在open之前,对params查询参数做个处理
// console.log(params)
if (params) {
// if成立,表示params对象是存在的
// console.log('if成立,表示params对象是存在的,才有必要把params对象处理成键值对字符串,放到url地址后面')
let arr = []
for (let k in params) {
arr.push(`${k}=${params[k]}`)
}
// console.log(arr.join('&')) // name=lw&age=19
// 把键值对字符串拼接到url地址后面,并使用 ? 隔开
url += `?${arr.join('&')}` // url = url + ?name=lw&age=19
}
// 2.
xhr.open(method, url)
// 3.
// xhr.send(请求体数据)
// 字符串有对应方法实现转大小写
// 'GeT'.toLowerCase() 'get'.toUpperCase()
if (method.toLowerCase() === 'get') {
// 以下代码适用于get方式 ==> 没有请求体
// console.log('这是get请求方式')
xhr.send()
} else {
// 需要判断,请求方式不为get的话,而且有data请求体数据的话,就来处理data数据
// post put ... 方式
if (data) {
if (data instanceof FormData) {
// if成立,说明请求体的数据为FormData格式数据
xhr.send(data)
} else if (typeof data === 'object') {
// if成立,说明请求体的数据为js对象,但是在发送的时候,需要将其处理成json字符串
xhr.setRequestHeader('Content-Type', 'application/json')
xhr.send(JSON.stringify(data))
} else if (typeof data === 'string') {
// if成立,说明请求体的数据为键值的字符串
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send(data)
}
}
}
// 处理响应
xhr.addEventListener('load', function () {
// console.log(xhr.response) // 服务器响应结果
// 把promise实例对象的状态改成成功fulfilled
resolve(JSON.parse(xhr.response)) // 把服务器响应的json字符串数据给反序列化下
})
// 监听 error 事件 处理请求失败
xhr.addEventListener('error', function () {
reject('网络异常,请求失败,请稍后重试~~~')
})
})
}
// 发送get请求
document.querySelector('#btnGet').addEventListener('click', function () {
// 使用自己封装的ajax函数来发送请求
myAxios({
// method: 'gEt',
url: 'http://www.liulongbin.top:3009/api/get',
params: {
name: 'lw',
age: 19
}
}).then((res) => {
console.log(res) // 服务器响应结果 js对象 方便去操作
}).catch((err) => {
alert(err)
})
})
// 发送post请求
document.querySelector('#btnPost').addEventListener('click', function () {
// 使用自己封装的ajax函数来发送请求
myAxios({
method: 'post',
url: 'http://www.liulongbin.top:3009/api/post',
params: {
name: 'lw',
age: 19
},
data: {
a: 1,
b: 2
}
}).then((res) => {
console.log(res) // 服务器响应结果
})
})
document.querySelector('#btnPost2').addEventListener('click', function () {
let fd = new FormData()
fd.append('car', 'bmw')
fd.append('money', 190)
// 使用自己封装的ajax函数来发送请求
myAxios({
method: 'post',
url: 'http://www.liulongbin.top:3009/api/post',
params: {
name: 'lw',
age: 19
},
data: fd, // 是FormData格式的数据
}).then((res) => {
console.log(res) // 服务器响应结果
})
})
document.querySelector('#btnPost3').addEventListener('click', function () {
// 使用自己封装的ajax函数来发送请求
myAxios({
method: 'post',
url: 'http://www.liulongbin.top:3009/api/post',
params: {
name: 'lw',
age: 19
},
data: 'a=1&b=2', // 键值对字符串
}).then((res) => {
console.log(res) // 服务器响应结果
})
})
</script>
</body>
</html>