码迷,mamicode.com
首页 > 移动开发 > 详细

js设计模式--适配器模式--生产实践 axios

时间:2021-04-14 11:54:13      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:cal   xmlhttp   targe   UNC   --   function   tde   兼容   hub   

  适配器模式实践:axios

  axios本身就用到了适配器模式,他的兼容方案值得学习和借鉴。

  axios的强大之处,在于它不仅仅局限于浏览器端的库,在Node 环境下,也照样好使,axios完美地磨平了两种环境下api的调用差异 ,靠的正是对适配器模式的灵活运用。

  在axios的核心逻辑中,实际上派发请求的是 dispatchRequest方法。这个方法主要做了两件事,

  1. 数据转换,转换请求体/响应体,可以理解为数据层面的适配器
  2. 调用适配器

  调用适配器的逻辑:

 1 // 若用户未手动配置适配器,则使用默认的适配器
 2 var adapter = config.adapter || defaults.adapter;
 3 // dispatchRequest方法的末尾调用的是适配器方法
 4 return adapter(config).then(
 5   function onAdapterResolution(response) {
 6     // 请求成功的回调
 7     throwIfCancellationRequested(config);
 8     // 转换响应体
 9     response.data = transformData(
10       response.data,
11       response.headers,
12       config.transformResponse
13     );
14     return response;
15   },
16   function onAdapterRejection(reason) {
17     // 请求失败的回调
18     if (!isCancel(reason)) {
19       throwIfCancellationRequested(config);
20       // 转换响应体
21       if (reason && reason.response) {
22         reason.response.data = transformData(
23           reason.response.data,
24           reason.response.headers,
25           config.transformResponse
26         );
27       }
28     }
29     return Promise.reject(reason);
30   }
31 );

  在实际开发中,我们默认适配器的频率更高一些。默认适配器在 axios/lib/default.js 里面通过 getDefaultAdapter 方法来获取的。

 1 function getDefaultAdapter() {
 2   var adapter;
 3   // 判断当前是否是node环境
 4   if (
 5     typeof process !== "undefined" &&
 6     Object.prototype.toString.call(process) === "[object process]"
 7   ) {
 8     // 如果是node环境,调用node专属的http适配器
 9     adapter = require("./adapters/http");
10   } else if (typeof XMLHttpRequest !== "undefined") {
11     // 如果是浏览器环境,调用基于xhr的适配器
12     adapter = require("./adapters/xhr");
13   }
14   return adapter;
15 }
16 // http 中的适配器
17 module.exports = function httpAdapter(config) {
18     return new Promise(function dispatchHttpRequest(resolvePromise, rejectPromise) {
19       // 具体逻辑
20     }
21 }
22 // xhr 中的适配器
23 module.exports = function xhrAdapter(config) {
24     return new Promise(function dispatchXhrRequest(resolve, reject) {
25       // 具体逻辑
26     }
27 }

  http 和 xhr 两个适配器 1. 入参都是 config      2.出参都是 Promise

  axios 发起跨平台请求时,不仅调用的接口名时同一个,入参和出参的格式都只要掌握同一套。

 

js设计模式--适配器模式--生产实践 axios

标签:cal   xmlhttp   targe   UNC   --   function   tde   兼容   hub   

原文地址:https://www.cnblogs.com/Sabo-dudu/p/14653748.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!