当前位置: 首页 > news >正文

Promise与Axios:异步编程

一、解决回调嵌套/回调地狱(代码1-展示axios链式调用)

1.1 传统回调-回调地狱

如果没有Promise,我们可能需要这样写:

        axios({url: 'http://hmajax.itheima.net/api/province'}).then((provinceResult) => {const pname = provinceResult.data.list[0];console.log('省份:', pname);axios({url: 'http://hmajax.itheima.net/api/city',params: { pname }}).then((cityResult) => {const cname = cityResult.data.list[0];console.log('城市:', cname);axios({url: 'http://hmajax.itheima.net/api/area',params: { pname, cname }}).then((areaResult) => {console.log('地区数据:', areaResult.data);}).catch((err) => {console.error('获取地区数据失败:', err);});}).catch((err) => {console.error('获取城市数据失败:', err);});}).catch((err) => {console.error('获取省份数据失败:', err);});

这种"回调地狱"让代码难以阅读和维护。

而promise给了我们一种拥有较强可读性与灵活性的解决方法:
该示例为axios集成函数,其底层为promise与xhr结合使用,返回值也为promise。

let pname = ''axios({url: 'http://hmajax.itheima.net/api/province'}).then((result) => {console.log(result);pname = result.data.list[0]console.log(result.data.list[0]);return axios({url: 'http://hmajax.itheima.net/api/city',params: {pname: `${result.data.list[0]}`}})}).then((result => {console.log(result);return axios({url: 'http://hmajax.itheima.net/api/area',params: {pname,cname: `${result.data.list[0]}`}})})).then(result => {console.log(result);})

1.2 链式调用实践

代码展示了典型的Promise链:

axios.get('/api/province').then(result => {           // 第一个thenpname = result.data.list[0];return axios.get('/api/city', {params: {pname}}); // 返回新Promise}).then(result => {           // 第二个thenreturn axios.get('/api/area', {params: {pname, cname: result.data.list[0]}});}).then(result => {           // 第三个thenconsole.log(result);});

每个then接收前一个Promise的解析值,并可以返回新Promise继续传递。
Promise通过链式调用解决了回调嵌套问题,让异步代码拥有了近乎同步代码的可读性。

二、Promise返回值详解(代码2-promise与xhr包装函数)

为了更好理解promise,我们用promise与xhr包装一个简单的axios函数:
同时为了帮助大家加强理解,尽量不使用语义化变量名

        function myaxios(lala) {//promise函数return new Promise((resolve, reject) => {//查询模式(有params)if (lala.params) {//传递查询参数const paramsobj = new URLSearchParams(lala.params)const stree = paramsobj.toString()lala.url += `?${stree}`}//配置xhrconst xhr = new XMLHttpRequest()xhr.open(lala.method || 'GET', lala.url)xhr.addEventListener('loadend', () => {if (xhr.status >= 200 && xhr.status < 300) {console.log(xhr.response);console.log(JSON.parse(xhr.response));resolve(JSON.parse(xhr.response))}else {reject(new Error(xhr.response))}})//请求格式(有data)if(lala.data){xhr.setRequestHeader('Contentt-Type','application/json')const streee=JSON.stringify(lala.data)xhr.send(streee)}else{xhr.send()}})}myaxios({url: 'http://hmajax.itheima.net/api/register',method:'POST',data:{username:'evergreen',password:'060722'}}).then((result) => {console.log(result);console.log('注册成功');}).catch((error) => {console.log(error);})

2.1 核心特性

在代码2实现中,myaxios函数返回一个Promise对象:

function myaxios(lala) {return new Promise((resolve, reject) => {// 异步操作if(成功) resolve(result);else reject(error);});
}

关键点

  1. 每个.then()都会返回新的Promise,允许继续链式调用
  2. 回调函数的返回值决定新Promise的状态:
    • 返回普通值 → Promise resolved
    • 返回Promise → 跟随该Promise状态
    • 抛出错误 → Promise rejected

三、Axios/myaxios返回值解析

3.1 响应结构

在代码1/2中,axios/myaxios返回的Promise解析值均为一个标准响应对象:

{data: {},       // 服务器返回的数据(自动JSON解析)status: 200,    // HTTP状态码statusText: 'OK', headers: {},    // 响应头config: {},     // 请求配置request: {}     // 底层请求对象
}

3.2 错误处理

axios自动将非2xx状态码视为reject,同时我们也在myaixios中实现:

 		if (xhr.status >= 200 && xhr.status < 300) {console.log(xhr.response);console.log(JSON.parse(xhr.response));resolve(JSON.parse(xhr.response))}else {reject(new Error(xhr.response))}

四、封装实践(代码2解析)

在实现自己的myaxios时,注意以下几点:

  1. Promise封装错误状态设置

    return new Promise((resolve, reject) => {// XHR操作if (xhr.status >= 200 && xhr.status < 300) {resolve(JSON.parse(xhr.response));} else {reject(new Error(xhr.response));}
    });
    
  2. 参数处理

    // 处理查询参数if (lala.params) {//传递查询参数const paramsobj = new URLSearchParams(lala.params)const stree = paramsobj.toString()lala.url += `?${stree}`}
    // 处理请求体if(lala.data){xhr.setRequestHeader('Contentt-Type','application/json')const streee=JSON.stringify(lala.data)xhr.send(streee)}else{xhr.send()
    
  3. 错误对象:使用new Error()包装错误信息,在程序而非语义上标记错误信息,便于调试

完整代码:

代码1:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>let pname = ''axios({url: 'http://hmajax.itheima.net/api/province'}).then((result) => {console.log(result);pname = result.data.list[0]console.log(result.data.list[0]);return axios({url: 'http://hmajax.itheima.net/api/city',params: {pname: `${result.data.list[0]}`}})}).then((result => {console.log(result);return axios({url: 'http://hmajax.itheima.net/api/area',params: {pname,cname: `${result.data.list[0]}`}})})).then(result => {console.log(result);})</script>
</body></html>

代码2:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>/* lala={url:''method:''} *///要封装的axiosfunction myaxios(lala) {//promise函数return new Promise((resolve, reject) => {//如果有if (lala.params) {//传递查询参数const paramsobj = new URLSearchParams(lala.params)const stree = paramsobj.toString()lala.url += `?${stree}`}//配置xhrconst xhr = new XMLHttpRequest()xhr.open(lala.method || 'GET', lala.url)xhr.addEventListener('loadend', () => {if (xhr.status >= 200 && xhr.status < 300) {console.log(xhr.response);console.log(JSON.parse(xhr.response));resolve(JSON.parse(xhr.response))}else {reject(new Error(xhr.response))}})//发送xhrif(lala.data){xhr.setRequestHeader('Contentt-Type','application/json')const streee=JSON.stringify(lala.data)xhr.send(streee)}else{xhr.send()}})}myaxios({url: 'http://hmajax.itheima.net/api/register',method:'POST',data:{username:'evergreen',password:'060722'}}).then((result) => {console.log(result);console.log('注册成功');}).catch((error) => {console.log(error);})</script>
</body></html>
http://www.lryc.cn/news/589688.html

相关文章:

  • 基于CentOS的分布式GitLab+Jenkins+Docker架构:企业级CI/CD流水线实战全记录
  • MySQL 8.0 OCP 1Z0-908 题目解析(27)
  • WAN技术
  • ollama快速部署使用(windows版)
  • 【Java】【力扣】101.对称二叉树
  • Spring之核心容器(IoC,DI,基本操作)详解
  • 中国旅行社协会在京召开“文旅人工智能应用研讨会”,助力文旅创新发展
  • python —— 真二
  • 广州邮科光纤交换机的应用:网络世界中的幕后核心
  • 【Qt开发】Qt的背景介绍(二)-> 搭建Qt开发环境
  • SAP中批量处理角色(复制、修改、上载,生成)
  • Apache IoTDB(1):时序数据库介绍与单机版安装部署指南
  • Clip微调系列:《CLIP-Adapter: Better Vision-Language Models with FeatureAdapters》
  • 【Qt+error】error: use of undeclared identifier ‘MainWindow
  • QT技巧之快速搭建串口收发平台
  • C++ -- STL-- List
  • 上公网-从内网到公网
  • C++ 中两个类之间的通信方式
  • Linux 文件系统实现层详解:原理、结构与驱动衔接
  • C++回顾 Day7
  • 企业级实时流处理:Kafka Streams完整解决方案
  • 基于Springboot+UniApp+Ai实现模拟面试小工具五:权限校验参数校验及日志功能实现
  • 从抽象函数到可计算导数 ——SymPy 中占位、求导、代入的完整闭环
  • OpenAI GPT-4o技术详解:全能多模态模型的架构革新与生态影响
  • AJAX 开发中的注意点
  • cursor使用mcp连接mysql数据库,url方式
  • Python 程序设计讲义(1):PyCharm 安装教程
  • 网络基础10 业务访问控制--ACL与包过滤
  • HarmonyOS-ArkUI: Web组件加载流程1
  • 隐私计算四大主流开源框架:从学术研究到工业落地,附PySyft实战Demo