Ajax的基本使用

97 阅读1分钟

Ajax是一种客户端与服务器进行网络通信技术,AJAX通常使用XMLHttpRequest 对象来发送请求和接收响应

axios的基本使用

axios完整写法

image.png

Promise

Promise 对象用于表示一个异步操作的最终完成状态及其结果值

作用:能够解决回调函数地狱(多层回调函数嵌套),axios内部使用了Promise来管理网络请求

写法

image.png

Promise的三种状态

1. 待定(pending): 初始状态,既没有被兑现(resolve),也没有被拒绝(reject)
2. 已兑现(fullfilled): 意味着操作成功完成
3. 已拒绝(rejected): 意味着操作失败

状态的改变不可逆

直接得到一个结果的写法

1. Promise.resolve(成功信息) 直接得到一个已兑现(fullfilled)的Promise对象
2. Promise.reject(失败信息)直接得到一个已拒绝(rejected)的Promise对象

promise静态方法

image.png

回调函数地狱

缺点

1.代码可读性差
2.错误处理困难
3.难以进行代码复用和模块化

写法

image.png

链式编程

利用在then中返回一个新的promise对象

then 和 then 以及 catch 之间是平级的

image.png

async函数和 await

Promise 的链式编程虽然不用嵌套了,但是依旧有回调函数我们可以使用 async 函数 结合 await来进一步优化,让代码变得简单和易读

image.png

Ajax原理

axios 内部采用 XMLHttpRequest 与服务器交互

xMLHttpRequest (XHR)对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL,获取数据。这允许网页在不影响用户操作的情况下,更新页面的局部内容。xMLHttpRequest 在AJAX 编程中被大量使用。

image.png