AJAX学习日记——Day 4

最新推荐文章于 2024-06-14 10:07:00 发布

林钟雪

最新推荐文章于 2024-06-14 10:07:00 发布

阅读量411

点赞数 10

分类专栏： AJAX 文章标签： ajax 学习前端 javascript 开发语言

本文链接：https://blog.csdn.net/Lin_Zhong_/article/details/136625670

版权

AJAX 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、宏任务和微任务

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身份验证失败情况做出处理
}