zhr 一个简易的fetch封装

最新推荐文章于 2024-07-28 12:19:03 发布
最新推荐文章于 2024-07-28 12:19:03 发布
阅读量281 收藏
点赞数
分类专栏： javascript 文章标签： javascript 前端 json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35606400/article/details/125252441
版权 
/**
 * 一个简易fetch封装
 * author: slongzhang
 * date: 2022-06-13
 * 修改于 https://github.com/Sunny-lucking/howToBuildMyAxios
 */ 
( function( global, factory ) {
  "use strict";
  if ( typeof module === "object" && typeof module.exports === "object" ) {

    // For CommonJS and CommonJS-like environments where a proper `window`
    // is present, execute the factory and get zhr.
    // For environments that do not have a `window` with a `document`
    // (such as Node.js), expose a factory as module.exports.
    // This accentuates the need for the creation of a real `window`.
    // e.g. var zhr = require("zhr")(window);
    // See ticket #14549 for more info.
    module.exports = global.document ?
      factory( global, true ) :
      function( w ) {
        if ( !w.document ) {
          throw new Error( "zhr requires a window with a document" );
        }
        return factory( w );
      };
  } else {
    factory( global );
  }

// Pass this if window is not defined yet
} )( typeof window !== "undefined" ? window : this, function( window, noGlobal ) {
  "use strict"; 

// 可用请求方法
const methodsArr = ['get', 'head', 'post', 'put', 'delete', 'connect', 'options', 'trace', 'patch'];

// 判断是否为空
const empty = (value) => {
  if (null === value) {
    return true;
  } else if (['Set', 'Map'].includes(Object.prototype.toString.call(value).slice(8, -1))) {
    return value.size == 0 ? true : false;
  } else if ("object" == typeof value) {
    if (Object.getOwnPropertyDescriptor(value, "length")) {
      return value.length > 0 ? false : true;
    } else {
      return Object.keys(value).length > 0 ? false : true;
    }
  } else if (value == 0) {
    return true;
  } else {
    return !value;
  }
}

// 获取数据类型
const varType = (any) => {
  return Object.prototype.toString.call(any).slice(8, -1).toLowerCase();
}

/**
* trim基础函数
* str              String                要处理的原始字符串
* charlist         String                要去除的字符
* type             Integer               去除类型:0两边,1:左边,2右边
.*/
const trimBase = (str, charlist, type = 0) => {
  if (typeof str !== 'string') {
    return str;
  }
  if (typeof charlist === 'undefined') {
    if (type === 1) {
      return str.replace(/^\s+/gm, '');
    } else if (type === 2) {
      return str.replace(/\s+$/gm, '');
    } else {
      return str.replace(/^\s+|\s+$/gm, '');
    }
  }
  charlist = charlist.toString().split('');
  let zy = ['$', '(', ')', '*', '+', '.', '[', ']', '?', '\\', '/', '^', '{', '}', '!', '|'],
    ps = '';
  for (let item of charlist) {
    if (zy.includes(item)) {
      ps += '\\';
    }
    ps += item;
  }
  let reg;
  if (type === 1) {
    reg = new RegExp("\^" + ps + "+", "gm");
  } else if (type === 2) {
    reg = new RegExp(ps + "+$", "gm");
  } else {
    reg = new RegExp("\^" + ps + "+|" + ps + "+$", "gm");
  }
  return str.replace(reg, '');
}






// 工具类
const utils = {
  extend(a, b, context) {
    for (let key in b) {
      if (b.hasOwnProperty(key)) {
        if (typeof b[key] === 'function') {
          a[key] = b[key].bind(context);
        } else {
          a[key] = b[key]
        }
      }

    }
  },
  // 请求参数转换
  transformRequestParam(param, urlEncode = false) {
    let dataType = varType(param),
      result;
    switch (dataType) {
      case 'array': {
        result = [];
        Object.values(param).forEach((item, index) => {
          switch (varType(item)) {
            case 'string':
              result.push(item);
              break;
            case 'array':
              item[1] = empty(item[1]) ? '' : item[1];
              !empty(item[0]) && result.push(item[0] + '=' + encodeURIComponent(item[1]));
              break;
            case 'object':
              item.value = empty(item.value) ? '' : item.value;
              !empty(item.key) && result.push(item.key + '=' + encodeURIComponent(item.value));
              break;
          }
        })
        result = result.join('&');
      }
      break;
      case 'object': {
        result = [];
        Object.entries(param).forEach(([key, item = ''], index) => {
          result.push(key + '=' + encodeURIComponent(item));
        })
        result = result.join('&');
        break;
      }
      default:
        result = (urlEncode && varType(result) !== 'string') ? '' : param;
    }
    return result;
  },
  // 移除两侧字符串
  trim(str, charlist) {
    return trimBase(str, charlist, 0);
  }
  // 移除左侧字符
  ,
  ltrim(str, charlist) {
    return trimBase(str, charlist, 1);
  }
  // 移除右侧字符
  ,
  rtrim(str, charlist) {
    return trimBase(str, charlist, 2);
  }
  // 判断是否数字
  ,
  isNum(value) {
    return value !== "" && value !== null && !isNaN(value);
  }
}


// 拦截器
class InterceptorsManage {
  constructor() {
    this.handlers = [];
  }

  use(fullfield, rejected) {
    this.handlers.push({
      fullfield,
      rejected
    })
  }
}


// 发送请求
const sendXhr = (config) => {
  return new Promise((resolve, reject) => {
    let timeoutId = null, headers;
    if (varType(config.headers) !== 'object') {
      headers = {}
    }
    // if (empty(headers.accept)) {
    //   headers.accept = 'application/json, text/javascript, */*; q=0.01';
    // }
    // 判断url
    let url = varType(config.url) === 'string' ? config.url : '';
    // 判断方法
    let method = (varType(config.method) === 'string' &&
      (config.method = config.method.toLowerCase()) &&
      methodsArr.includes(config.method)) ? config.method : 'GET';
    method = method.toUpperCase(); // 转换为大写
    // 处理body
    if (!empty(config.body)) {
      config.body = utils.transformRequestParam(config.body, method === 'GET');
    }
    switch (varType(config.body)) {
      case 'formdata':
        headers['content-type'] = 'application/multipart/form-data';
        break;
      case 'object':
        config.body = JSON.stringify(config.body);
        headers['content-type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
        break;
      default:
        try {
          JSON.parse(config.body);
          headers['content-type'] = 'application/json; charset=UTF-8';
        } catch (e) {
          headers['content-type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
        }
    }

    // 处理query
    let query = '';
    if (!empty(config.query)) {
      query = utils.transformRequestParam(config.query, true);
      // url = strstr($url,'?')? utils.trim($url,'&').'&'.$param: $url.'?'.$param;
    }
    // 如果是get|delete|...等请求则将body内容处理到url里
    if (['GET', 'DELETE', 'HEAD', 'OPTIONS'].includes(method) && !empty(config.body) && varType(config.body) === 'string') {
      query = utils.trim(query + '&' + config.body, '&');
    }
    // 如果有query
    if (!empty(query)) {
      url = url.indexOf('?') > 0 ? utils.trim(url, '&') + '&' + query : url + '?' + query;
    }
    

    

    // // 判断是否异步请求
    // if (!!config.async) {

    // }
    // else {

    // }
    // console.log({config})
    // 重新规范配置
    let requestConfig = {
      url,
      method,
      headers,
      cache: config.cache,
      credentials: 'include',
    }
    if (!['GET', 'DELETE', 'HEAD', 'OPTIONS'].includes(method)) {
      requestConfig.body = config.body;
    }
    if (varType(config.xhrFields) === 'object') {
      Object.entries(config.xhrFields).forEach(([key, item], index) => {
        if (key === 'headers') {
          if (varType(item) === 'object') {
            Object.entries(item).forEach(([idx, val], ii) => {
              requestConfig.headers[idx] = val;
            })
          }
        } else if (!['url', 'method'].includes(key)) {
          requestConfig[key] = item;
        }
      })
    }
    // 处理超时
    if (config.timeout != 0 && config.timeout !== false) {
      const controller = new AbortController()
      if (utils.isNum(config.timeout)) {
        config.timeout = parseInt(config.timeout)
      }
      else {
        config.timeout = 60000;// 60 second timeout
      }
      timeoutId = setTimeout(() => controller.abort(), config.timeout)
      requestConfig.signal = controller.signal;
    }
    // 正式请求获取
    fetch(url, requestConfig).then(response => {
      let responseType = null,
        responseHeadersArray = [],
        responseHeaders = {},
        responsePromise;
      response.headers.forEach((item, key) => {
        responseHeadersArray.push({
          key,
          item
        });
        responseHeaders[key] = item;
      })
      // 判断有没有指定获取的数据类型
      if (varType(config.responseType) === 'string' && ['json', 'text', 'blob', 'arraybuffer'].includes(config.responseType.toLowerCase())) {
        responseType = config.responseType.toLowerCase();
      } else {
        // 从响应格式里获取
        responseType = response.headers.get('content-type');
        if (responseType.includes('/json')) {
          responseType = 'json';
        } else if (responseType.includes('text/html')) {
          responseType = 'text';
        }
      }
      switch (responseType) {
        case 'json':
          responsePromise = response.json()
          break;
        case 'blob':
          responsePromise = response.blob()
          break;
        case 'arraybuffer':
          responsePromise = response.arrayBuffer()
          break;
        default:
          responsePromise = response.text()
      }
      responsePromise.then(result => {
        clearTimeout(timeoutId) // 清除请求超时
        response.$result = result;
        response.$config = requestConfig;
        response.$responseHeaders = responseHeaders;
        response.$responseHeadersArray = responseHeadersArray;

        resolve(response)
      }).catch(reject);
    }).catch(reject)
  })
}



// 请求方法
class Zhr {
  constructor() {
    this.interceptors = {
      request: new InterceptorsManage,
      response: new InterceptorsManage
    }
  }

  request(config) {
    // 拦截器和请求组装队列
    let chain = [sendXhr.bind(this), undefined] // 成对出现的，失败回调暂时不处理

    // 请求拦截
    this.interceptors.request.handlers.forEach(interceptor => {
      chain.unshift(interceptor.fullfield, interceptor.rejected)
    })

    // 响应拦截
    this.interceptors.response.handlers.forEach(interceptor => {
      chain.push(interceptor.fullfield, interceptor.rejected)
    })

    // 执行队列，每次执行一对，并给promise赋最新的值
    let promise = Promise.resolve(config);
    while (chain.length > 0) {
      promise = promise.then(chain.shift(), chain.shift())
    }
    return promise;
  }
}



// 定义get,post...方法，挂在到Zhr原型上
methodsArr.forEach(met => {
  Zhr.prototype[met] = function() {
    // console.log('执行'+met+'方法');
    return this.request({
      method: met,
      url: arguments[0],
      body: arguments[1] || {},
      ...arguments[2] || {}
    })
  }
})

// 最终导出 zhr 的方法，即实例的request方法
function createZhrFn() {
  let zhr = new Zhr();

    let req = zhr.request.bind(zhr);
    // 混入方法， 处理zhr的request方法，使之拥有get,post...方法
    utils.extend(req, Zhr.prototype, zhr)
    // 混入属性，处理zhr的request方法，使之拥有zhr实例上的所有属性
    utils.extend(req, zhr)
    return req;
}

const zhr = createZhrFn();


// 使用案例

// // 添加请求拦截器
// zhr.interceptors.request.use(function (config) {
//     // 在发送请求之前可以重新处理config
//     // config.method = "get";
//     // console.log({'interceptorsRequest': config});
//     return config;
// }, function (error) {
//     // 对请求错误做些什么
//     return Promise.reject(error);
// });

// // 添加响应拦截器
// zhr.interceptors.response.use(function (response) {
//     // 对响应数据做点什么
//     console.log({'interceptorsResponse': response});
//     return response;
// }, function (error) {
//     // 对响应错误做点什么
//     return Promise.reject(error);
// });





  var
  // Map over zhr in case of overwrite
  _zhr = window.zhr,
  // Map over the zsl in case of overwrite
  _zsl = window.zsl;
  // 解除zsl和zhr变量的使用
  zhr.noConflict = function( deep ) {
    if ( window.zsl === zhr ) {
      window.zsl = _zsl;
    }
    if ( deep && window.zhr === zhr ) {
      window.zhr = _zhr;
    }
    return zhr;
  };
  if ( typeof noGlobal === "undefined" ) {
    window.zhr = window.zsl = zhr;
  }
  return zhr;
});

拦截器使用

// 使用案例

// // 添加请求拦截器
// zhr.interceptors.request.use(function (config) {
//     // 在发送请求之前可以重新处理config
//     // config.method = "get";
//     // console.log({'interceptorsRequest': config});
//     return config;
// }, function (error) {
//     // 对请求错误做些什么
//     return Promise.reject(error);
// });

// // 添加响应拦截器
// zhr.interceptors.response.use(function (response) {
//     // 对响应数据做点什么
//     console.log({'interceptorsResponse': response});
//     return response;
// }, function (error) {
//     // 对响应错误做点什么
//     return Promise.reject(error);
// });

发送请求案例

zhr({
    url: 'http://127.0.0.1',
    timeout: 10000,
    query: [
		{key: 'k1', value: 'v1'},
		['k2', 'v2'],
		'k3=v3'
	], // url => http://127.0.0.1?k1=v1&k2=v2&k3=v3
    body: {
	},
    method: 'post'
}).then(response => {
    console.log(response.$result)
}).catch(err => console.log(err))

参考 Sunny-lucking/howToBuildMyAxios手写axios

slongzhang_
关注
专栏目录
Fetch简单封装
c587846464的博客
06-12 806
1.Fetch本质上是一种标准，该标准定义了请求、响应和绑定的流程。2.Fetch标准还定义了Fetch () JavaScript API。3.可用于前后端，数据交互。4.fetch返回的是promise对象，比XMLHttpRequest的实现更简洁，fetch 使用起来更简洁 ，完成工作所需的实际代码量也更少5.fetch 可自定义是否携带Cookie。6.fetch不像axios需要安装使用，fetch可以直接使用。
zhr255.ipynb
05-25
zhr255.ipynb
fetch二次封装完整详细场景使用案例
最新发布
07-28 447
二次封装fetchAPI 是一种常见的做法，特别是在大型项目中，可以统一处理 HTTP 请求和响应。以下是一个使用 TypeScript 进行fetch。
fetch封装
diaojw090的博客
03-30 364
1.直接上完整代码 import 'whatwg-fetch' import 'es6-promise' export function get(url) { let result = fetch(url, { method: 'POST', credentials: 'include', headers: { 'Access...
Fetch封装
A_lamp的博客
01-23 448
import { loading } from '@/methods/talk' import { Toast } from 'vant' export const json = (response) => response.json() export const status = (response) => { if (response.status >= 200 && response.status < 300) { return response .
fetch的封装
weixin_73077230的博客
06-19 800
【代码】fetch的封装。
zhr1996.github.io
05-06
【标题】"zhr1996.github.io" 指的是一个个人博客网站，由用户张浩然创建。在GitHub上，用户经常将自己的项目托管在以用户名为前缀的github.io域名下，因此"zhr1996.github.io"可能是张浩然个人的在线简历、技术分享...
路由器原理ZHR.pptx
10-07
路由器原理ZHR.pptx
HTML学习笔记_zhr1226.rar
02-17
这本“HTML学习笔记_zhr1226”涵盖了HTML的基础知识和进阶应用，对于初学者和寻求提升的开发者来说是一份宝贵的资源。 在HTML的学习中，首先会接触到的是基本结构，包括文档类型声明`<!DOCTYPE html>`，以及`<html>...
zhr_imfilter.rar_imfilter _imfilter的qt实现_imflter函数_图片对比 matlab
07-14
本程序实现了matlab自带函数imfillter的功能，是.m文件的形式，参数和imfilter一样可选。程序附有图片，并且在程序最后使用imfilter，便于直接对比观察处理效果。注：本程序是读入RGB图像，转换成灰度图进行处理。
fetch 封装
weixin_34280237的博客
06-12 238
fetch.js var http = { get: function (url) { return new Promise((resolve, reject) => { fetch(url) .then(res => res.json()) .then(data => resolve(data)) .cat...
【Fetch简单封装】
weixin_73656344的博客
06-19 1152
1.Fetch本质上是一种标准，该标准定义了请求、响应和绑定的流程。2.Fetch标准还定义了Fetch () JavaScript API。3.可用于前后端，数据交互。4.fetch返回的是promise对象，比XMLHttpRequest的实现更简洁，fetch 使用起来更简洁 ，完成工作所需的实际代码量也更少5.fetch 可自定义是否携带Cookie。6.fetch不像axios需要安装使用，fetch可以直接使用。
fetch请求的封装
weixin_45664217的博客
02-20 1502
首先在react项目下的src文件夹中创建一个utils文件夹， 然后在utils文件夹中新建一个index.js文件 index.js中写入代码 const querystring = require("querystring"); export function httpGet (url) { const result = fetch(url) return result; } export function httpPost(url, params) { const result = .
封装fetch请求
LueLueLue77的博客
04-29 2220
记录下本人对fetch请求的封装..
Fetch的封装
m0_45116831的博客
12-01 994
在这个版本的 FetchService 中，我们把公共的请求逻辑放到了 _request 方法中。我们把方法（GET、POST、PUT、DELETE），URL和可能的请求体传递给 _request 方法，然后它处理所有的共享逻辑，包括运行拦截器，发送请求，处理响应和解析JSON。每个方法都返回一个Promise，该Promise解析为一个泛型。，这意味着你可以指定返回数据的类型。这样我们就成功地创建了一个。文件夹中创建一个新的。
python一维数组求绝对值
07-27
以下是一个示例代码： ```python import numpy as np # 创建一维数组 arr = np.array(\[-1, 2, -3, 4, -5\]) # 对数组中的每个元素求绝对值 abs_arr = np.abs(arr) # 输出结果 print(abs_arr) ``` 输出结果为：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值