1.promise的三种状态
1.pending 准备 resolve 成功 reject 失败
2.promise的静态方法
1.promise.all()
若结果都是resolve()则返回是数组
若值中有reject()则立刻返回失败的promise,值就是当前失败的值
2.promise.allSettled()
不管结果是成功还是失败都会返回一个数组且都有当前返回值
3.promise.race()
2.4promise的allSettled方法
<script>
// 东市买骏马(关门),西市买鞍鞯,南市买辔头,北市买长鞭
// Promise.allSettled([p1, p2,p3]) 和 Promise.all([p1, p2,p3])
// 如果p1,p2,p3都Ok, 他们的结果是一样的
// 如果p1,p2,p3有一个不OK,例如p1不ok,他们的结果是不一样的
// Promise.all([p1, p2,p3]) ===> 失败的promise,值就p1的值
// Promise.allSettled([p1, p2,p3])===> [p1的结果,p2的结果,p3的结果]
let p1 = Promise.reject(1)
let p2 = Promise.resolve(2)
let p3 = Promise.resolve(3)
// let p = Promise.all([p1,p2,p3])
// console.log(p)
let p = Promise.allSettled([p1,p2,p3])
console.log(p)
// 该 Promise.allSettled() 方法返回一个在所有给定的 promise
// 都已经fulfilled或rejected后的
// promise,并带有一个对象数组,每个对象表示对应的 promise 结果。
</script>
3.链式作用
<script>
new Promise((resolve, reject) => {
resolve(1)
}).then(res =>{
return res + 2
}).then(res => {
return res + 3
}).then(res => {
console.log(res);
})
// new promise 返回状态是成功 值为1
// 然后执行.then 由于返回不是new promise 所以把值传给了 第一个res
// 第一个res return 结果为 3
// 又因为返回的不是promise 把第一个return 的res 传给第二个res
// 所以第二个res 返回是 6
// 然后.then 执行 打印为6
</script>
4.检查ajax出错的四个地方
1.url
2.method
3.参数
4.content-type
5.promise的all方法
<script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>
<script>
// 目标: 讲解Promise的all方法
// 静态(类)方法: 直接用Promise类来调用
// 1. Promise.all()
// 作用: 合并多个Promise对象, 等待所有成功后, 返回结果
// 语法: Promise.all([promise对象1, promise对象2, ...]).then()
// 特点: 返回最终结果是个数组, 值是按顺序对应小Promise对象的成功结果
// 注意: 如果有1个Promise失败, 则整个Promise对象则失败
axios.defaults.baseURL = 'http://hmajax.itheima.net'
let p1 = new Promise((resolve, reject) => {
setTimeout(() =>{
resolve(100)
},2000)
})
let p2 = new Promise((resolve, reject) => {
setTimeout(() =>{
resolve(2)
},5000)
})
let p3 = axios.get('/api/province').then(res =>{
return res
})
let p = Promise.all([p1,p2,p3]).then(res => {
console.log(res);
})
</script>
6.promise的race方法
<script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>
<script>
// 静态(类)方法: 直接用Promise类来调用
// 1. Promise.race() - 赛跑机制
// 作用: 发起并行多个Promise对象, 等待只要任何一个成功, 返回结果执行then
// 语法: Promise.race([promise对象1, promise对象2, ...]).then()
// 特点: 返回第一个有结果的promise对象,不管是成功还是失败的结果
axios.defaults.baseURL = 'http://hmajax.itheima.net'
let p1 = new Promise((resolve, reject) => {
setTimeout(() =>{
resolve(100)
},20)
})
let p2 = new Promise((resolve, reject) => {
setTimeout(() =>{
resolve(2)
},500)
})
let p3 = axios.get('/api/province').then(res =>{
return res
})
let p = Promise.race([p1,p2,p3]).then(res => {
console.log(res);
})
</script>
7.封装自己的axios函数
<script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>
<script>
//把myaxios离得ur 和method传入进去
function myAxios({url,method}){
// console.log(url,method);
const xhr = new XMLHttpRequest()
xhr.open(method,url)
xhr.send()
const p = new Promise((resolve, reject) => {
xhr.addEventListener('load',() => {
//resolve(xhr.response)
console.dir(xhr)
if(xhr.status >=200 && xhr.status <400) {
resolve(JSON.parse(xhr.response))
} else {
reject(JSON.parse(xhr.response))
}
})
})
return p
}
myAxios({
url:'http://hmajax.itheima.net/api/province',
method: 'GET'
}).then(res => {
console.log('then',res);
}).catch(err =>{
console.log(err);
})
</script>
8.案例导航
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: #333;
}
ul {
list-style: none;
}
.container {
width: 980px;
margin: 0 auto;
}
.top {
display: flex;
width: 100%;
height: 80px;
align-items: center;
justify-content: space-around;
position: relative;
}
.top>li {
text-align: center;
}
.top>li>a {
border-bottom: 1px solid transparent;
}
.top>li:hover>a {
border-color: #27ba9b;
color: #27ba9b;
}
.top>li:hover>.sub {
opacity: 1;
transform: scale(1, 1);
}
.sub {
position: absolute;
left: 0;
top: 80px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 100%;
display: flex;
align-items: center;
height: 100px;
opacity: 0;
transform: scale(1, 0);
transform-origin: top center;
transition: all 0.3s .1s;
}
.sub li {
width: 120px;
text-align: center;
}
.sub li a {
display: block;
font-size: 14px;
padding-top: 8px;
}
.sub li a span {
display: block;
}
.sub li a img {
width: 60px;
height: 60px;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="container">
<ul class="top" id="top">
<!-- <li>
<a href="javascript:;">首页</a>
<ul class="sub">
<li>
<a href="javascript:;">
<span>砂锅厨具</span>
<img src="https://yanxuan.nosdn.127.net/3102b963e7a3c74b9d2ae90e4380da65.png?quality=95&imageView" alt="">
</a>
</li>
</ul>
</li> -->
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>
<script>
axios.defaults.baseURL= 'http://ajax-api.itheima.net'
axios.get('/api/category/top',).then(res =>{
//console.log(res);
const arr = res.data.data
console.log(arr);
const arrAjax = arr.map(item => axios.get('/api/category/sub?id='+item.id))
console.log(arrAjax);
Promise.all(arrAjax).then(res => {
console.log(res);
let str = res.map(item => {
const p = item.data.data
const lis = p.children.map(subitem => {
return `<li>
<a href="javascript:;">
<span>${subitem.name}</span>
<img src="${subitem.picture}" alt="">
</a>
</li>`
}).join('')
return `
<li>
<a href="javascript:;">${p.name}</a>
<ul class="sub">
${lis}
</ul>
</li>
`
}).join('')
document.querySelector('#top').innerHTML= str
})
})
</script>
</body>
9.async await
作用:替代.then且可以获取到值,后期更加方便优化代码
<script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>
<script>
async function fn(){
const p = await axios.get('http://ajax-api.itheima.net/api/category/top',)
console.log(p);
}
fn()
let p = new Promise((resolve, reject) => {
setTimeout(() =>{
resolve(100)
},2000)
})
async function fn1() {
const reslut = await p
console.log(reslut);
}
fn1()
</script>
10.async await 特点-异步
<script>
const p = new Promise((resolve, reject) => {
setTimeout(() => {
reject(2)
}, 2000)
})
// try {
// // 这里放可能在执行中报错的代码
// // 如果报错会终止代码继续执行, 直接跳转进catch里执行
// } catch (err) {
// // err接收try大括号内报错抛出的异常代码
// }
//
// await只能拿成功状态的promise的值,如果遇到了失败状态的promise,就要 try ... catch
async function myFn(){
try {
const result = await p
console.log('result', result)
} catch(err){
console.log('err', err)
}
}
myFn()
// console.log(1);
// async function myFn() {
// console.log(2)
// const res = await 3 // Promise.resolve(3)
// console.log(res);
// }
// console.log(5);
// // async修饰的函数是异步的
// // 进入函数内部,执行代码一直到遇到await,就跳出
// // 继续执行这个函数之后的代码
// myFn()
// console.log(6);
// console.log(1);
// console.log(5);
// setTimeout(()=>{ console.log(3)})
// console.log(6);
</script>
11.优化回调地狱函数
<script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>
<script>
// 目标: 使用Promise的链式调用解决问题
// 前提: axios函数在原地返回的就是一个Promise对象
// let pname = ''
// axios.defaults.baseURL = 'http://ajax-api.itheima.net'
// axios.get('/api/province').then(res => {
// // 2. 获取某个省, 对应的城市列表
// pname = res.data.data[5];
// return axios.get(`/api/city?pname=${pname}`)
// }).then(res => {
// // 3. 获取某个市, 对应的地区列表
// let cname = res.data.data[0]
// return axios.get(`/api/area?pname=${pname}&cname=${cname}`)
// }).then(res => {
// console.log(res);
// })
</script>
<script>
axios.defaults.baseURL = 'http://ajax-api.itheima.net'
async function fn(){
const provinces = await axios.get('/api/province')
const pname = provinces.data.data[5];
const citys = await axios.get(`/api/city?pname=${pname}`)
let cname = citys.data.data[0]
const areas = await axios.get(`/api/area?pname=${pname}&cname=${cname}`)
console.log(areas.data.data)
}
fn()
</script>