一文读懂AJAX Axios Promise
AJAXAJAX（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
axios({
url:'https://api.miaomc.cn/image/get'
}).then(result=>{
console.log(result);
document.querySelector('img').src=result.request.responseURL
}) XHR
XMLHttpRequest（XHR）是一种创建 HTTP 哀求的 JavaScript API。它的方法提供了在欣赏器和服务器之间发送哀求的本领。
利用XHR获取接口数据
// 创建XMLHttpRequest对象
const xhr = new XMLHttpRequest()
xhr.open('get','https://api.miaomc.cn/image/get?type=json')
xhr.addEventListener('loadend',()=>{
console.log(xhr.response); //字符串
// console.log(typeof xhr.response);
const data = JSON.parse(xhr.response) //string >> JSON
console.log(data);
document.querySelector('img').src=data.url
})
// 发送请求
xhr.send() Promise
Promise 是一个对象，它代表了一个异步操作的最终完成大概失败。
利用 Promise - JavaScript | MDN
一个 Promise 一定处于以下几种状态之一：
[*] 待定（pending）：初始状态，既没有被兑现，也没有被拒绝。
[*] 已兑现（fulfilled）：意味着操作成功完成。
[*] 已拒绝（rejected）：意味着操作失败。
// 创建Promise对象，pending-待定状态
const p = new Promise((resolve, reject) => {
// 执行异步代码
setTimeout(() => {
// resolve() fulfilled状态then()
resolve('success')
// reject() rejected状态 catch()
reject(new Error('failed'))
}, 2000)
})
//获取结果
p.then(result => {
console.log(result);
}).catch(error => {
console.log(error);
}) Promise+XHR实现Axios
// 创建Promise对象，pending-待定状态
const p = new Promise((resolve, reject) => {
// 执行异步代码
const xhr = new XMLHttpRequest()
xhr.open('get', 'https://api.miaomc.cn/image/get?type=json')
xhr.addEventListener('loadend', () => {
const data = JSON.parse(xhr.response)
if (data.code >= 200 && data.code < 300) {
resolve(data)
} else {
reject(new Error(xhr.response))
}
})
xhr.send()
})
//获取结果
p.then(result => {
console.log(result)
document.querySelector('img').src = result.url
}).catch(error => {
console.dir(error);
}) 同步和异步
取自黑马步伐员
https://i-blog.csdnimg.cn/direct/730ad7f23ad243b6b8305efb12d537eb.png
回调函数地狱
在回调函数中嵌套回调函数
axios({ url: '' }).then(result => {
axios({ url: '' }).then(result => {
axios({ url: '' }).then(result => {
})
})
}) Promise链式调用
// then()方法会生成一个新的Promise对象
axios({ url: '' }).then(result => {
return axios({url:''})
}).then(result=>{
return axios({url:''})
}).then(result=>{
}) async await办理回调函数地狱
async function 声明创建一个绑定到给定名称的新异步函数。函数体内允许利用 await 关键字，这使得我们可以更简洁地编写基于 promise 的异步代码，并且避免了显式地配置 promise 链的必要。
在async函数内，利用await关键字代替then()函数，等候获取Promise对象成功状态的结果值
async function getApi() {
try{
const result1 = await axios({url:'url1'})
const result2 = await axios({url:'url2'})
const result3 = await axios({url:'url3'})
// code
}catch(error){
console.dir(error)
}
}
变乱循环（EventLoop）
JavaScript 有一个基于变乱循环的运行时模型，变乱循环负责执行代码、网络和处理变乱以及执行队列中的子任务。
变乱循环 - JavaScript | MDN
缘故原由：JS是单线程的，为了让耗时的代码不影响其他代码的运行，筹划了变乱循环模型
AJAX-Day04-07.变乱循环_哔哩哔哩_bilibili
宏任务和微任务
https://i-blog.csdnimg.cn/direct/65ef0850e26a4b32a454b64b5f732535.png
JS内代码执行次序
https://i-blog.csdnimg.cn/direct/0db9888e2d984c5faecf849d40b4c8a9.png
https://i-blog.csdnimg.cn/direct/809fedb7e90e46e081c0a0976d48c4e0.png
变乱循环练习题
// 目标：回答代码执行顺序
console.log(1)
setTimeout(() => {
console.log(2)
const p = new Promise(resolve => resolve(3))
p.then(result => console.log(result))
}, 0)
const p = new Promise(resolve => {
setTimeout(() => {
console.log(4)
}, 0)
resolve(5)
})
p.then(result => console.log(result))
const p2 = new Promise(resolve => resolve(6))
p2.then(result => console.log(result))
console.log(7) https://i-blog.csdnimg.cn/direct/65729c4e922341079c43ffa17a09092f.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]