AJAX Promise axios基本概念和用法

惊落一身雪  金牌会员 | 2024-9-24 19:31:32 | 来自手机 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 746|帖子 746|积分 2238

       引言

        JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。 这是因为 JavaScript 这门脚本语言诞生的任务所致——JavaScript 是为处置惩罚页面中用户的交互，以及操纵 DOM而诞生的。好比我们对某个DOM 元素进行添加和删除操纵，不能同时进行。 应该先辈行添加，之后再删除。 单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如许所导致的题目是： 假如 JS 执行的时间过长，如许就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉
        为了解决这个题目，利用多核 CPU 的盘算本领，HTML5 提出 Web Worker 标准，允许JavaScript 脚本创建多个线程。于是，JS 中出现了同步和异步。 同步，前一个任务结束后再执行后一个任务，程序的执行次序与任务的排列次序是同等的、同步的。好比做饭的同 步做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜。 异步你在做一件事情时，因为这件事情会耗费很长时间，在做这件事的同时，你还可以去处置惩罚其他事情。好比做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。 他们的本质区别：这条流水线上各个流程的执行次序不同。
同步任务：同步任务都在主线程上执行，形成一个执行栈。
异步任务：JS 的异步是通过回调函数实现的。 一般而言，异步任务有以下类型:：
1、平常事件，如 click、resize 等
2、资源加载，如 load、error 等
3、定时器，包罗 setInterval、setTimeout 等 异步任务相关添加到任务队列中
4、AJAX
事件循环（event loop）

概念：

         JavaScript有一个基于事件循环的并发模型，事件循环负责执行代码，网络和处置惩罚事件以及执行队列中的子任务。
缘故原由：

         JavaScript是单线程（某一刻只执行一行代码），为了让耗期间码不阻塞其他代码运行，计划了事件循环模型。
执行机制：

         JS执行代码的逻辑是次序读取的，但是可以或许分辨出同步任务的代码和异步任务的代码。
一般来说，当读取到同步任务代码时候会将代码带进执行栈，直接执行；
当JS读取到异步任务的代码（如setTimeout，setInterval，各种平常事件，资源加载等）时，会将这个任务放进浏览器中处置惩罚，浏览器处置惩罚完毕后（如setTimeout执行完毕，或完成了点击事件等），会将内里的回调函数放入任务队列中，当所有执行栈中的代码执行完毕时候，再将任务队列中的回调函数放入执行栈中执行。不同的是，JS中的Promise对象本身是同步的任务，但当它调用then和catch方法时，会将方法内的回调函数放入另一个任务队列中，因此这里产生了两个任务队列，我们经常把前者称为宏任务队列，后者称为微任务队列。当所有执行栈中的代码执行完毕后，JS引擎会先将微任务队列的回调函数放入执行栈中执行完毕后再将宏任务队列中的回调函数放入执行栈中执行。
  
  1.     console.log(1)
  2.     setTimeout(() => {
  3.       console.log(2)
  4.     }, 0)
  5.     const p = new Promise((resolve, reject) => {
  6.       resolve(3)
  7.     })
  8.     p.then(res => {
  9.       console.log(res)
  10.     })
  11.     console.log(4)
复制代码
如该代码中，打印数字先后次序是1、4、3、2
        JS在执行中，次序读取，先打印1；之后遇到定时器，将它交给浏览器处置惩罚，浏览器在0ms后将回调函数放进了宏任务队列；之后读到Promise，当它调用then函数时候将then内里的回调函数放入微任务队列中；再读取到打印4；执行栈清空，之后JS引擎先将微任务队列的回调放入执行栈中执行了，打印3；最后将宏任务队列中的回调函数放进执行栈执行，打印2。
AJAX

定义：

        AJAX是异步的JavaScript和XML（Asynchronous JavaScript And XML）。简单地说，就是利用XMLHTTPRequest对象与服务器通讯。它可以利用JSON、XML、HTML、text文本等格式发送和接收数据。AJAX最吸引人的就是它的异步特性，也就是说它可以在不重新革新页面的情况下与服务器通讯，交换数据或更新页面
概念：

        AJAX 是浏览器与服务器进行数据通讯的技术。
基本利用：

  
  1.     //获取button元素
  2.     const btn = document.querySelector('button')
  3.     const result = document.querySelector('#result')
  4.     //绑定事件
  5.     btn.addEventListener('click',function(){
  6.       //创建对象
  7.       const xhr = new XMLHttpRequest()
  8.       //初始化  设置请求方法和url   xhr.open('请求方法','请求地址')
  9.       xhr.open('GET','http://127.0.0.1:8000/server')
  10.       //发送
  11.       xhr.send()
  12.       //事件绑定  处理服务端返回的结果
  13.       //on 当什么的时候  readystate是xhr对象中的属性,是状态表示  
  14.       // 有 0 1 2 3 4 一共5个值
  15.       // 0表示未初始化,最开始属性的值就是0,
  16.       // 1表示open方法调用完毕
  17.       // 2表示send方法调用完毕
  18.       // 3表示服务端返回了部分结果
  19.       // 4表示服务端返回了所有结果
  20.       // change 改变
  21.       // 这5个值一共改变4次,改一次触发一次事件
  22.       xhr.onreadystatechange = function(){
  23.         //判断  服务端是否返回所有结果
  24.         if(xhr.readyState === 4){
  25.           //判断响应状态码 200 404 403 401 500
  26.           //2xx都表示成功
  27.           if(xhr.status >= 200 && xhr.status<300){
  28.             //处理结果 行 头 空行 体
  29.             // 1.响应行
  30.             console.log(xhr.status) //状态码
  31.             console.log(xhr.statusText)//状态字符串
  32.             console.log(xhr.getAllResponseHeaders())//所有响应头
  33.             console.log(xhr.response)//响应体
  34.             result.innerHTML = xhr.response
  35.           }
  36.         }
  37.       }
  38.     })
复制代码
1.创建XMLHTTPRequest对象并定义xhr作为常量接收
2.初始化：调用open方法设置哀求方法和url，此中open方法还可以或许设置第三个参数，true（异步） 或false（同步），默认为true
3.调用send方法发送
4.监听onreadystatechang事件，执行回调，当readystate为4同时状态码在200到300之间时候对服务端返回的数据（主要是响应体xhr.response）执行要做的事情
此中，初始化中调用open方法设置哀求方法主要有GET（获取数据）和POST（提交数据）等
此中若哀求方法为GET，可以在url网址中携带查询参数，语法是
                         http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2
而利用POST方法则可以在send方法中设置参数，格式一般为JSON字符串，作为哀求体，提交上去。
回调地狱（Callback Hell）

        在AJAX的原生实现中，利用了onreadystatechange事件，当该事件触发并且符合一定条件时，才能拿到想要的数据，之后才能开始处置惩罚数据，如许做看上去并没有什么麻烦，但假如这个时候，我们还需要别的一个AJAX哀求，这个新AJAX哀求的此中一个参数，得从上一个AJAX哀求中获取，这个时候我们就不得不等待上一个接口哀求完成之后，再哀求后一个接口。
  
  1. ​
  2. const xhr = new XMLHttpRequest();
  3. xhr.open('get', 'https://xx.com/api?a=2&b=3');
  4. xhr.send();
  5. xhr.onreadystatechange = function () {
  6.   if (xhr.readyState === 4) {
  7.     if (xhr.status >= 200 && xhr.status < 300) {
  8.       console.log(xhr.responseText)
  9.         //伪代码....
  10.           const xhr = new XMLHttpRequest();
  11.           xhr.open('get','http://www.xx.com?a'+xhr.responseText);
  12.           xhr.send();
  13.           xhr.onreadystatechange = function(){
  14.               if(xhr.readyState === 4){
  15.                 if(xhr.status>=200 && xhr.status<300){
  16.                   console.log(xhr.responseText)
  17.                   }
  18.               }
  19.           }
  20.       }
  21.    }
  22. }
  24. ​
复制代码
当出现第三个AJAX(乃至更多)仍然依赖上一个哀求时，我们的代码就变成了一场灾难。
这场灾难，往往也被称为回调地狱。
Promise

定义：

           Promise对象用于体现一个异步操纵的终极完成（或失败）及其结果值。
利益：

1. 逻辑更清晰
2. 了解 axios 函数内部运作机制
3. 能解决回调函数地狱题目
基本利用：

  
  1.       const p = new Promise((resolve,reject)=>{
  2.       const xhr = new XMLHttpRequest()
  3.       xhr.open('GET','http://xx/api/province123')
  4.       xhr.send()
  5.       xhr.onreadystatechange = ()=>{
  6.         if(xhr.readyState === 4){
  7.           if(xhr.status>=200&&xhr.status<300){
  8.             console.log(xhr.response)
  9.             resolve(xhr.response)
  10.           }else{
  11.             reject(new Error(xhr.response))
  12.           }
  13.         }
  14.       }
  15.     }).then(result=>{
  16.       document.querySelector('.my-p').innerHTML = JSON.parse(result).list.join('<br>')
  17.     }).catch(error=>{
  18.       console.dir(error)
  19.       document.querySelector('.my-p').innerHTML = error.message
  20.     })
复制代码
1.创建Promise对象，内部传入以resolve函数和reject函数为参数的函数，定义常量p接收
2.内部执行例如AJAX的哀求，将乐成返回的哀求体作为参数传入resovle函数，调用resovle后会调用then函数，此时promise的状态由pending变为fullfilled；将没有乐成返回的哀求体作为参数传入reject函数，调用reject后则执行catch函数，prmise状态由pending变为rejected；此中最后可以调用finally函数，最后一定调用
        以上为Promise的基本用法，今后基于Promise对象，ES7提出了async和await作为解决异步的终极方案。
async和await

        异步函数 async function 中可以利用 await 指令，await 指令后必须跟着一个 Promise，异步函数会在这个 Promise 运行中停息，直到其运行结束再继承运行。
        异步函数实际上原理与 Promise 原生 API 的机制是一模一样的，只不过更便于程序员阅读。
基本利用：

  
  1. // 1. 定义async修饰函数
  2.     async function getData() {
  3.       // 2. await等待Promise对象成功的结果
  4.       const pObj = await axios({url: 'http://xxx/api/province'})
  5.       const pname = pObj.data.list[0]
  6.       const cObj = await axios({url: 'http://xxx/api/city', params: { pname }})
  7.       const cname = cObj.data.list[0]
  8.       const aObj = await axios({url: 'http://xxx/api/area', params: { pname, cname }})
  9.       const areaName = aObj.data.list[0]
  12.       document.querySelector('.province').innerHTML = pname
  13.       document.querySelector('.city').innerHTML = cname
  14.       document.querySelector('.area').innerHTML = areaName
复制代码
axios

        概念：

        Axios 是一个基于Promise 网络哀求库，作用于node.js 和浏览器中。 在服务端它利用原生 node.js http 模块, 而在客户端 (浏览端) 则利用 XMLHttpRequests。
        特性：



  • 从浏览器创建XMLHttpRequest
  • 支持 Promise API
  • 拦截哀求和响应
  • 转换哀求和响应数据
  • 取消哀求
  • 超时处置惩罚
  • 查询参数序列化支持嵌套项处置惩罚
  • 自动将哀求体序列化为：

    • JSON (application/json)
    • Multipart / FormData (multipart/form-data)
    • URL encoded form (application/x-www-form-urlencoded)

  • 将 HTML Form 转换成 JSON 进行哀求
  • 自动转换JSON数据
基本利用：

  1. btn.onclick = ()=>{
  2.       axios({
  3.         //请求方法
  4.         method:'POST',
  5.         //url
  6.         url:'/axios-server',
  7.         //url查询参数
  8.         params:{
  9.           vip:10,
  10.           level:30
  11.         },
  12.         //头信息
  13.         headers:{
  14.           a:100,
  15.           b:200
  16.         },
  17.         //请求体参数
  18.         data:{
  19.           username:'admin',
  20.           password:'admin'
  21.         }
  22.       }).then(response=>{
  23.         console.log(response)
  24.         //响应状态码
  25.         console.log(response.status)
  26.         //响应状态字符串
  27.         console.log(response.statusText)
  28.         //响应头信息
  29.         console.log(response.headers)
  30.         //响应体
  31.         console.log(response.data)
  32.       })
  33.     }
复制代码
以对象形式，传入各种配置项的参数，将返回的结果作为then的参数接收并处置惩罚。
        由于篇幅关系，就只能将基本的AJAX、Promise、axios概念和用法介绍到这，更详细的用法待日后学习。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

惊落一身雪

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表