一、宏任务和微任务
1、定义
1、定义
宏任务:由浏览器环境执行的异步代码
微任务:由JS引擎环境执行的异步代码
2、宏任务:
JS脚本执行事件
setTimeout
AJAX请求完成事件
用户交互事件
3、微任务:
Promise代码
*Promise本身是同步的,而then和catch是异步的*
2、概念:
1、概念:
当任务队列中同时又宏任务和微任务时,会优先执行微任务
二、Promise.all静态方法
1、定义
1、定义
将多个小的Promise对象合并成大的Promise对象
当所有Promise对象成功时,才执行.then,否则执行catch
2、语法
2、语法
const p = Promise.all([Promise_one,Promise_two])
p.then(result =>{
}).catch(erro =>{
})
3、示例
3、示例
const bjPromise = axios({
url:'http://hmajax.itheima.net/api/weather',
params:{
city:'110100'
}
})
const shPromise = axios({
url:'http://hmajax.itheima.net/api/weather',
params:{
city:'310100'
}
})
const gzPromise = axios({
url:'http://hmajax.itheima.net/api/weather',
params:{
city:'440100'
}
})
const szPromise = axios({
url:'http://hmajax.itheima.net/api/weather',
params:{
city:'440300'
}
})
const p =Promise.all([bjPromise,shPromise,gzPromise,szPromise])
p.then(result => {
console.log(result);
}).catch(error=>{
console.log(error);
})
三、综合案例——商城
<!DOCTYPE html>
<html>
<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>案例_分类导航</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 大容器 -->
<div class="container">
<div class="sub-list">
<div class="item">
<h3>分类名字</h3>
<ul>
<li>
<a href="javascript:;">
<img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/img/category%20(9).png" />
<p>巧克力</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/img/category%20(9).png" />
<p>巧克力</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/img/category%20(9).png" />
<p>巧克力</p>
</a>
</li>
</ul>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
/**
* 目标:把所有商品分类“同时”渲染到页面上
* 1. 获取所有一级分类数据
* 2. 遍历id,创建获取二级分类请求
* 3. 合并所有二级分类Promise对象
* 4. 等待同时成功后,渲染页面
*/
axios({
url:'http://hmajax.itheima.net/api/category/top',
}).then(result => {
const secPromiseList = result.data.data.map(item =>
{
return axios({
url:'http://hmajax.itheima.net/api/category/sub',
method:'get',
params:{
id:item.id,
}
})
}
)
// console.log(secPromiseList);
const p = Promise.all(secPromiseList)
//所有的一起判断
p.then(result => {
console.log(result[0].data.data);
const dataList = result.map(item => {
const dataObj = item.data.data;
return `
<div class="item">
<h3>${dataObj.name}</h3>
<ul>
${
//嵌套,用一层取二层
dataObj.children.map(item => {
return `
<li>
<a href="javascript:;">
<img src="${item.picture}" />
<p>${item.name}</p>
</a>
</li>
`
}).join('')
}
</ul>
`
}).join('')
console.log(dataList);
document.querySelector('ul').innerHTML = dataList;
})
// document.querySelector('ul').innerHTML = secPromiseList;
})
</script>
</body>
</html>
四、token令牌
1、概念
1、访问权限的令牌,本质上是一串字符串
2、在正确登陆后返回,由后端签发并返回
2、作用
1、判断是否有登陆状态,控制访问权限
3、实现
const token = localStorage.getItem('token');
if(!token)
{
location.href = '../index.html';
}
五、headers参数
headers:{
Authoriazation:`Bearer ${localStorage.getItem('token')}}`
}
六、axios请求拦截器
1、概念
1、发起请求前,触发的配置函数,对请求参数进行额外配置
2、当有公共配置和设置时,就统一设置在请求拦截器中
2、语法
axios.interceptors.request.use(function(config)
{
const token = location
})
3、示例
axios.interceptors.request.use(function (config){
//在发送请求之前在做的事情
const token = localStorage.getItem('token')
token && (config.headers.Authorization = `Bearer ${token}`)
}),function (error){
//对请求错误做些什么
return Promise.reject(error)
}
四、axios响应拦截器
1、概念
1、响应回到then/catch之前,触发的拦截函数,对响应结果统一处理
2、语法
axios.interceptors.response.use(function(response){
//2xx的状态码都会触发该函数
//对响应数据做些什么
return response;
}),function (error){
//2xx以外的状态码都会触发该函数
//对响应错误做些什么,如:统一对401身份验证失败情况做出处理
}
五、axios优化
1、概念
1、利用响应拦截器,使result直接获取需要的值
2、示例
axios.interceptors.response.use(function(response){
//2xx的状态码都会触发该函数
//对响应数据做些什么
const result = response.data
return result;
}),function (error){
//2xx以外的状态码都会触发该函数
//对响应错误做些什么,如:统一对401身份验证失败情况做出处理
}