IT评测·应用市场-qidao123.com技术社区

标题: 一文读懂AJAX Axios Promise [打印本页]

作者: 曹旭辉 时间: 2025-1-18 14:44
标题: 一文读懂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

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);
})

复制代码

同步和异步

取自黑马步伐员

回调函数地狱

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

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
宏任务和微任务

JS内代码执行次序

变乱循环练习题

// 目标：回答代码执行顺序
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)

复制代码

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

欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)