一文读懂AJAX Axios Promise

AJAX

AJAX（Asynchronous JavaScript And XML）是一种在 Web 应用中通过异步发送 HTTP 哀求向服务器获取内容，并利用这些新内容更新页面中相关的部分，而无需重新加载整个页面的 Web 开辟技能。这可以让网页更具有相应性，因为只哀求了必要更新的部分。
AJAX - MDN Web 文档术语表：Web 相关术语的定义 | MDN
Axios

Axios 是一个 基于 promise 的 HTTP 客户端，适用于 node.js 和欣赏器。它是 同构的（即它可以利用同一套代码运行在欣赏器和 nodejs 中）。在服务器端它利用原生的 node.js http 模块，在客户端（欣赏器）它利用 XMLHttpRequests。
利用Axios获取接口数据
本文所用接口均来自随机萌图 Image API - MIAOMC

1. axios({
2.         url:'https://api.miaomc.cn/image/get'
3.     }).then(result=>{
4.         console.log(result);
5.         document.querySelector('img').src=result.request.responseURL
6.   })

复制代码

XHR

XMLHttpRequest（XHR）是一种创建 HTTP 哀求的 JavaScript API。它的方法提供了在欣赏器和服务器之间发送哀求的本领。
利用XHR获取接口数据

1.     // 创建XMLHttpRequest对象
2.     const xhr = new XMLHttpRequest()
3.     xhr.open('get','https://api.miaomc.cn/image/get?type=json')
4.     xhr.addEventListener('loadend',()=>{
5.         console.log(xhr.response); //字符串
6.         // console.log(typeof xhr.response);
7.         const data = JSON.parse(xhr.response) //string >> JSON
8.         console.log(data);
9.         document.querySelector('img').src=data.url
10.     })
12.     // 发送请求
13.     xhr.send()

复制代码

Promise 

Promise 是一个对象，它代表了一个异步操作的最终完成大概失败。
利用 Promise - JavaScript | MDN
一个 Promise 一定处于以下几种状态之一：

• 待定（pending）：初始状态，既没有被兑现，也没有被拒绝。
  
• 已兑现（fulfilled）：意味着操作成功完成。
  
• 已拒绝（rejected）：意味着操作失败。
  

1.         // 创建Promise对象，pending-待定状态
2.         const p = new Promise((resolve, reject) => {
3.             // 执行异步代码
4.             setTimeout(() => {
6.                 // resolve() fulfilled状态  then()
7.                 resolve('success')
9.                 // reject() rejected状态 catch()
10.                 reject(new Error('failed'))
11.             }, 2000)
13.         })
15.         //获取结果
16.         p.then(result => {
17.             console.log(result);
18.         }).catch(error => {
19.             console.log(error);
20.         })

复制代码

Promise+XHR实现Axios

1.             // 创建Promise对象，pending-待定状态
2.             const p = new Promise((resolve, reject) => {
3.                 // 执行异步代码
4.                 const xhr = new XMLHttpRequest()
5.                 xhr.open('get', 'https://api.miaomc.cn/image/get?type=json')
6.                 xhr.addEventListener('loadend', () => {
7.                     const data = JSON.parse(xhr.response)
8.                     if (data.code >= 200 && data.code < 300) {
9.                         resolve(data)
10.                     } else {
11.                         reject(new Error(xhr.response))
12.                     }
14.                 })
15.                 xhr.send()
16.             })
18.             //获取结果
19.             p.then(result => {
20.                 console.log(result)
21.                 document.querySelector('img').src = result.url
22.             }).catch(error => {
23.                 console.dir(error);
24.             })

复制代码

同步和异步

取自黑马步伐员

回调函数地狱

在回调函数中嵌套回调函数

1.    axios({ url: '' }).then(result => {
2.         axios({ url: '' }).then(result => {
3.             axios({ url: '' }).then(result => {
5.             })
6.         })
7.     })

复制代码

Promise链式调用

1. // then()方法会生成一个新的Promise对象
2.     axios({ url: '' }).then(result => {
3.         return axios({url:''})
4.     }).then(result=>{
5.         return axios({url:''})
6.     }).then(result=>{
8.     })

复制代码

async await办理回调函数地狱

async function 声明创建一个绑定到给定名称的新异步函数。函数体内允许利用 await 关键字，这使得我们可以更简洁地编写基于 promise 的异步代码，并且避免了显式地配置 promise 链的必要。
在async函数内，利用await关键字代替then()函数，等候获取Promise对象成功状态的结果值

1.     async function getApi() {
2.         try{
3.             const result1 = await axios({url:'url1'})
4.             const result2 = await axios({url:'url2'})
5.             const result3 = await axios({url:'url3'})
7.             // code
8.         }catch(error){
9.             console.dir(error)
10.         }
11.         
12.     }

复制代码

变乱循环（EventLoop）

JavaScript 有一个基于变乱循环的运行时模型，变乱循环负责执行代码、网络和处理变乱以及执行队列中的子任务。
变乱循环 - JavaScript | MDN
缘故原由：JS是单线程的，为了让耗时的代码不影响其他代码的运行，筹划了变乱循环模型
AJAX-Day04-07.变乱循环_哔哩哔哩_bilibili
宏任务和微任务

JS内代码执行次序

变乱循环练习题

1.     // 目标：回答代码执行顺序
2.     console.log(1)
3.     setTimeout(() => {
4.       console.log(2)
5.       const p = new Promise(resolve => resolve(3))
6.       p.then(result => console.log(result))
7.     }, 0)
8.     const p = new Promise(resolve => {
9.       setTimeout(() => {
10.         console.log(4)
11.       }, 0)
12.       resolve(5)
13.     })
14.     p.then(result => console.log(result))
15.     const p2 = new Promise(resolve => resolve(6))
16.     p2.then(result => console.log(result))
17.     console.log(7)

复制代码

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