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

js适配器模式

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

在这里插入图片描述

应用

// Ajax适配器函数,入参与旧接口保持一致
async function AjaxAdapter(type, url, data, success, failed) {
    const type = type.toUpperCase()
    let result
    try {
         // 实际的请求全部由新接口发起
         if(type === 'GET') {
            result = await HttpUtils.get(url) || {}
        } else if(type === 'POST') {
            result = await HttpUtils.post(url, data) || {}
        }
        // 假设请求成功对应的状态码是1
        result.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 success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.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.kler.cn/a/473250.html

相关文章:

  • 《Spring Framework实战》3:概览
  • Hybrid A*算法-KinodynamicAstar::estimateHeuristic
  • LLM 大语言模型学习记录
  • js可不使用document直接根据id获取id元素
  • 无人机培训机构模拟考试系统技术详解
  • 让生命科学数据为数字时代服务
  • ATmega328P是一款基于AVR架构的高性能、低功耗8位微控制器
  • ajax与json
  • `Opencv` 形态学笔记
  • C++ 函数 模板
  • 代码重构 - 规范
  • 【Dify】Dify自定义模型设置 | 对接DMXAPI使用打折 Openai GPT 或 Claude3.5系列模型方法详解
  • SAP销售订单与MRP的另一个关联点:需求类型
  • <代码随想录> 算法训练营-2025.01.04
  • 动手学深度学习11.4. 随机梯度下降-笔记练习(PyTorch)
  • JavaScript系列(14)--元编程技术
  • WebSocket 服务端开发:Node.js 实战
  • 备战春招—FPGA 2024年的面试题库
  • 网络传输层TCP协议
  • Java-编写的一个生产者-消费者模式