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

js适配器模式

适配器模式通过把一个类的接口变换成客户端所期待的另一种接口,可以帮我们解决不兼容的问题。

在这里插入图片描述

应用

// Ajax适配器函数,入参与旧接口保持一致
async function AjaxAdapter(type, url, data, success, failed) {const type = type.toUpperCase()let resulttry {// 实际的请求全部由新接口发起if(type === 'GET') {result = await HttpUtils.get(url) || {}} else if(type === 'POST') {result = await HttpUtils.post(url, data) || {}}// 假设请求成功对应的状态码是1result.statusCode === 1 && success ? success(result) : failed(result.statusCode)} catch(error) {// 捕捉网络错误if(failed){failed(error.statusCode);}}
}// 用适配器适配旧的Ajax方法
async function Ajax(type, url, data, success, failed) {await AjaxAdapter(type, url, data, success, failed)
}

axios中的适配器

在axios中,适配器模式是通过adapter函数来实现的。adapter函数是一个高阶函数,它接受一个config对象作为参数,并返回一个新的config对象。
adapter函数中,可以对config对象进行修改和扩展,以适应不同的环境和需求。
例如,可以在adapter函数中添加请求拦截器和响应拦截器,以实现对请求和响应的统一处理。 同时,adapter函数还可以根据不同的环境和需求,选择不同的适配器来处理请求。
例如,在浏览器环境中,可以使用XMLHttpRequest适配器来发送请求;
在Node.js环境中,可以使用http适配器来发送请求。 具体来说,axios中的适配器模式实现了以下功能:

  1. 请求拦截器:在发送请求之前,可以对请求进行拦截和处理。例如,可以在请求拦截器中添加请求头、修改请求参数等。
  2. 响应拦截器:在接收到响应之后,可以对响应进行拦截和处理。例如,可以在响应拦截器中解析响应数据、处理错误信息等。
  3. 适配器选择:根据不同的环境和需求,选择不同的适配器来处理请求。例如,在浏览器环境中,可以使用XMLHttpRequest适配器来发送请求;在Node.js环境中,可以使用http适配器来发送请求。
  4. 请求发送:根据选择的适配器,发送请求并返回响应。 通过这种方式,axios可以实现对不同环境和需求的适配,同时也可以提高代码的可维护性和可扩展性。
// Make a request for a user with a given ID
axios.get('/user?ID=12345').then(function (response) {// handle successconsole.log(response);}).catch(function (error) {// handle errorconsole.log(error);}).then(function () {// always executed})   axios.post('/user', {firstName: 'Fred',lastName: 'Flintstone'}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});   axios({method: 'post',url: '/user/12345',data: {firstName: 'Fred',lastName: 'Flintstone'}
})
http://www.lryc.cn/news/517468.html

相关文章:

  • 小徐影城管理系统(源码+数据库+文档)
  • Linux第101步_了解LCD屏驱动“panel-simple.c”
  • 【实用技能】如何使用 .NET C# 中的 Azure Key Vault 中的 PFX 证书对 PDF 文档进行签名
  • 前端基础函数算法整理应用(sort+reduce+date+双重for循环)
  • 鸿蒙MPChart图表自定义(六)在图表中绘制游标
  • poi-tl+kkviewfile实现生成pdf业务报告
  • 【Uniapp-Vue3】scroll-view可滚动视图区域组件
  • asp.net core webapi中的数据注解与数据验证
  • PixPin—— 高效截图工具的下载与使用攻略
  • Go语言的 的多态性(Polymorphism)基础知识
  • Vue框架主要用来做什么?Vue框架的好处和特性.
  • 科普CMOS传感器的工作原理及特点
  • tensorflow 内存错误
  • spring boot解决swagger中的v2/api-docs泄露漏洞
  • 计算机网络 (25)IPV6
  • 小程序组件 —— 30 组件 - 背景图片的使用
  • 《Opencv》信用卡信息识别项目
  • Matlab贝叶斯估计MCMC分析药物对不同种群生物生理指标数据评估可视化
  • java 转义 反斜杠 Unexpected internal error near index 1
  • 网络安全常见的问题
  • 在ubuntu22.04中使用bear命令追踪内核编译报错的原因分析和解决方案
  • 【软考网工笔记】操作系统管理与配置——Windows
  • vue3 css实现文字输出带光标显示,文字输出完毕,光标消失的效果
  • 什么情况会导致JVM退出?
  • CentOS7修改Docker默认存储路径
  • OpenCV相机标定与3D重建(46)将三维空间中的点投影到二维图像平面上函数projectPoints()的使用
  • 基于Elasticsearch8的向量检索实现相似图形搜索
  • springboot+vue使用easyExcel实现导出功能
  • ffmpeg-avio实战:打开本地文件或者网络直播流dome
  • css预处理器sass