Service请求组件（可取消请求）

最新推荐文章于 2022-11-28 20:02:13 发布
最新推荐文章于 2022-11-28 20:02:13 发布
阅读量339 收藏
点赞数 1
文章标签： javascript 前端 react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ujjhuhu/article/details/125787899
版权

目录

组件流程图

在这里插入图片描述

前置知识

AbortController使用场景探索

2个AbortController的使用场景：fetch和addEventListener

fetch:

const controller = new AbortController();   // 新建一个AbortController实例
let signal = controller.signal;    // signal是AbortController实例的属性

//可以用作fetch的第二个参数中，控制请求取消
fetch(url, {signal}).then(function(response) {
      //...
    }).catch(function(e) {
      console.error('e', e);
    })
 // 调用abort方法，取消请求
 controller.abort();

addEventListener:

//还可以作为addEventListener第三个参数options上的可选属性：
//按照mdn的说法，当调用abort()后，监听器会被移除。其实这就相当于给我们内置了一个移除监听器的方式，可以不用把callback单独提取出成一个函数。

//之前创建以及取消监听
document.addEventListener('mousemove',  callback3);
document.removeEventListener('mousemove', callback3);

//使用AbortController取消监听
const controller = new AbortController();
    function callback (e) {
      document.addEventListener('mousemove',  (e) => {
          
      },{
           signal: controller.signal  
      });
   }
    document.addEventListener('mousedown', callback);
    document.addEventListener('mouseup', controller.abort);

Axios取消请求方式：

在这里插入图片描述

//axios从v0.22版本后也支持fetch的这种方式了
const controller = new AbortController();

axios.get('/foo/bar', {
   signal: controller.signal
}).then(function(response) {
   //...
});
// 取消请求
controller.abort()

组件代码实现

http.ts

import Axios, { AxiosInstance, AxiosResponse } from 'axios';
import fetchAdapter from './fetch-adapter';
import * as Middleware from './middleware';
import type { RsponseType, XHRResponse } from './interface';

const CancelToken = Axios.CancelToken;

//基础配置
const config = {
  baseURL: '/',   //基础路径前缀
  timeout: 60 * 1000, //设置超时时间
  xhrMode: 'fetch',   //请求made
  adapter: fetchAdapter,     //自定义处理请求函数
  headers: {
    Accept: 'application/json; charset=utf-8',
    'Content-Type': 'application/json; charset=utf-8',
  },
};

//创建axios实例
const httpInstance = Axios.create(config);

/**
 * 请求之前拦截动作
 */
httpInstance.interceptors.request.use(
  (response) => response,
  (error) => console.error(error),
);

/**
 * 请求之后拦截动作
 */
httpInstance.interceptors.response.use(
   //请求成功后的处理函数
  (response: AxiosResponse<any>) => {
    if (Middleware.responseMiddleware.length === 0) {
      return response.data;
    } else {
    	//遍历注册方法的函数队列，并依次执行
      Middleware.responseMiddleware.forEach((fn: (config: AxiosResponse<any>) => any) => (response = fn(response)));
      return response;
    }
  },
  //请求失败后的处理函数
  function httpUtilErrorRequest(error) {
    if (Middleware.responseErrorMiddleware.length !== 0) {
    	//遍历注册方法的函数队列，并依次执行
      Middleware.responseErrorMiddleware.forEach((fn: (config: any) => any) => (error = fn(error)));
      return Promise.reject(error);
    }
    if (!error.response) {
      console.error(error);
      return Promise.reject(error);
    }

    return Promise.reject(error.response);
  },
);
//抛出去的函数
function http({ cancelHttp, ...newOptions }: RsponseType): Promise<any> {
  let cancel;
  const cancelToken = new CancelToken((c) => {
    cancel = c;
    if (cancelHttp) {
    //将控制取消的c函数传出去
      cancelHttp(cancel);
    }
  });
	
  return httpInstance({ ...newOptions, cancelToken });
}

//和上面差不多，Content-Type不一样
const httpMultiPartInstance: AxiosInstance = Axios.create({
  timeout: 10 * 60 * 1000,
  adapter: fetchAdapter,
  headers: {
    'Content-Type': 'multipart/form-data',
  },
});

httpMultiPartInstance.interceptors.response.use(
  (response) => Promise.resolve(response.data),
  (error) => Promise.reject(error),
);

//这个是个原生ajax，因为有些人不喜欢用fetch
function httpXMLInstance({ url, method = 'GET', data, headers, cancelHttp, isAsync = false }: XHRResponse): Promise<any> {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    //ajax有自己的abort来处理取消请求
    const cancel = () => xhr.abort();
    if (cancelHttp) {
      cancelHttp(cancel);
    }
    xhr.open(method, url, !isAsync);
    if (headers) {
      Object.keys(headers).forEach((key) => {
        xhr.setRequestHeader(key, headers[key]);
      });
    }
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)) {
        let data;
        try {
          data = JSON.parse(xhr.response);
        } catch (e) {
          data = xhr.response;
        }
        resolve(data);
      }
      if (xhr.readyState === 4 && !(xhr.status === 200 || xhr.status === 304)) {
        reject(xhr);
      }
    };
    xhr.send(data ? JSON.stringify(data) : null);
  });
}

export { http as default, http, httpMultiPartInstance, httpXMLInstance };

fetch-adapter.ts(自定义处理请求)

/// <reference path="../../typings/global.d.ts"/>

import { AxiosRequestConfig, AxiosError, AxiosResponse, AxiosPromise } from 'axios';
import settle from 'axios/lib/core/settle';
import buildURL from 'axios/lib/helpers/buildURL';
import buildFullPath from 'axios/lib/core/buildFullPath';
import CanceledError from 'axios/lib/cancel/CanceledError';
import { isUndefined } from 'lodash-es';

export interface AxiosFetchRequestConfig extends AxiosRequestConfig<BodyInit> {
  mode?: RequestMode;
  body?: BodyInit;
  cache?: RequestCache;
  integrity?: string;
  redirect?: RequestRedirect;
  referrer?: string;
  credentials?: RequestCredentials;
}

export default function fetchAdapter(config: AxiosFetchRequestConfig): AxiosPromise {
  return new Promise((resolve, reject) => {
  	//创建实例
    const controller = new AbortController();
    const signal = controller.signal;

	//创建一个Request对象
    const request = createRequest(config, signal);
	//数组：包含请求，和判断是否请求超时的promise
    const promises = [getResponse(request, config)];
	
	//只要不是永久的就需要判断是否超时，添加到数组中
    if (config.timeout && config.timeout > 0) {
      promises.push(timeoutHandle(request, controller, config));
    }
    //如果已经取消了，改变状态
    if (config.cancelToken) {
      // Handle cancellation
      config.cancelToken.promise.then(function onCanceled(cancel) {
        if (!request) {
          return;
        }
        reject(!cancel ? new CanceledError(null, config, request) : cancel);
        controller.abort();
      });
    }
    //Promise.race传入数组，会返回数组中第一个改变状态的结果，规定时间范围内请求成功则正常返回，否则取消请求，返回失败结果
    return Promise.race(promises)
      .then((data) => settle(resolve, reject, data))
      .catch(reject);
  });
}

//根据timeout创建定时器，改变状态
function timeoutHandle(request: Request, controller: AbortController, config: AxiosFetchRequestConfig): Promise<Error> {
  return new Promise((resolve) => {
    setTimeout(() => {
      const message = config.timeoutErrorMessage ? config.timeoutErrorMessage : 'timeout of ' + config.timeout + 'ms exceeded';
      resolve(createError(message, config, 'ECONNABORTED', request));
      controller.abort();
    }, config.timeout);
  });
}

//获取Request实例
async function getResponse(request: Request, config: AxiosFetchRequestConfig) {
  let stageOne;
  try {
    stageOne = await fetch(request);
  } catch (e) {
    return createError('Network Error', config, 'ERR_NETWORK', request);
  }

  const response = {
    ok: stageOne.ok,
    status: stageOne.status,
    statusText: stageOne.statusText,
    headers: new Headers(stageOne.headers),
    config: config,
    request,
  } as unknown as AxiosResponse<any, any>;

  if (stageOne.status >= 200 && stageOne.status !== 204) {
    switch (config.responseType) {
      case 'arraybuffer':
        response.data = await stageOne.arrayBuffer();
        break;
      case 'blob':
        response.data = await stageOne.blob();
        break;
      case 'json':
        response.data = await stageOne.json();
        break;
      default:
        response.data = await stageOne.text();
        break;
    }
  }

  return response;
}

function createRequest(config: AxiosFetchRequestConfig, signal: AbortSignal): Request {
  const headers = new Headers(config.headers as any as Headers);

  if (config.auth) {
    const username = config.auth.username || '';
    const password = config.auth.password ? decodeURI(encodeURIComponent(config.auth.password)) : '';
    headers.set('Authorization', `Basic ${btoa(username + ':' + password)}`);
  }

  const method = config.method.toUpperCase();
  const options: RequestInit = { headers, method, signal };
  if (method !== 'GET' && method !== 'HEAD') {
    options.body = config.data;
  }
  if (config.mode) {
    options.mode = config.mode;
  }
  if (config.cache) {
    options.cache = config.cache;
  }
  if (config.integrity) {
    options.integrity = config.integrity;
  }
  if (config.redirect) {
    options.redirect = config.redirect;
  }
  if (config.referrer) {
    options.referrer = config.referrer;
  }

  if (!isUndefined(config.withCredentials)) {
    options.credentials = config.withCredentials ? 'include' : 'omit';
  }

  const fullPath = buildFullPath(config.baseURL, config.url);
  const url = buildURL(fullPath, config.params, config.paramsSerializer);

  // Expected browser to throw error if there is any wrong configuration value
  return new Request(url, options);
}
//创建axios错误实例
function createError(message: string, config: AxiosFetchRequestConfig, code: string, request: Request, response?: AxiosResponse): Error {
  return new AxiosError(message, AxiosError[code], config, request, response);
}

middleware.ts（注册方法，方法数组）

import type { MiddleWareType } from './interface';

let _global = window as any;
//请求成功后调用方法的数组
export const responseMiddleware: Array<any> = _global.responseMiddleware || [];
//请求失败后调用的方法数组
export const responseErrorMiddleware: Array<any> = _global.responseErrorMiddleware || [];

//请求成功后调用方法的注册
export function registerResponseMiddleware(fn: MiddleWareType): void {
  if (!responseMiddleware.includes(fn)) {
    responseMiddleware.push(fn);
    _global.responseMiddleware = responseMiddleware;
  }
}
//请求失败后调用方法的注册
export function registerResponseErrorMiddleware(fn: MiddleWareType): void {
  if (!responseErrorMiddleware.includes(fn)) {
    responseErrorMiddleware.push(fn);
    _global.responseErrorMiddleware = responseErrorMiddleware;
  }
}

index.ts

import { http, httpMultiPartInstance, httpXMLInstance } from './http';
import type { IServiceInterface } from './interface';
import { registerResponseMiddleware, registerResponseErrorMiddleware } from './middleware';

const Service = {
  http,
  httpXMLInstance,
  httpMultiPartInstance,
  registerResponseMiddleware,
  registerResponseErrorMiddleware,
} as IServiceInterface;

export default Service;

interface.d.ts（ts类型文件）

import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
export type RsponseType = AxiosRequestConfig & { requestId?: string; cancelHttp?: (cancel: Function) => void; loggerIndex?: number };

export type XHRResponse = {
  url: string;
  method: string;
  data?: any;
  headers?: any;
  cancelHttp?: any;
  isAsync?: boolean;
  requestId?: string;
};

export type MiddleWareType = (config: AxiosResponse<any>) => any;

export type IServiceInterface = {
  http(options: RsponseType): Promise<any>;
  httpXMLInstance(options: XHRResponse): Promise<any>;
  httpMultiPartInstance: AxiosInstance;
  registerResponseMiddleware(fn: MiddleWareType): void;
  registerResponseErrorMiddleware(fn: MiddleWareType): void;
};

总结

使用就是流程图上那样，如果要实现快速切换路由的时候已经发出去的请求让它们取消掉，需要自己去划分请求和路由之间的关系然后做处理，每个请求都会返回一个属于自己的cancel方法，处理起来很麻烦，但是并不是每一个请求都需要去取消它，没有必要，这主要是处理一些几秒或几十秒都还在pendding的请求就够了。所以这个组件我认为已经满足了业务上的需求，如果一定要追求完美，其实可以再包一层，可以定义不同路由和不同type的映射关系，在组件内部根据type去分组处理一批请求？

Provck
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTTP请求方式；service（）方法；同步请求与异步请求（Ajax）；Ajax实现-原生js-基于jQuery；响应内容-html-json-json解析库-Ajax获取自定义对象的json
qq_39497997的博客
04-26 417
1. Http的请求方式 GET 优点: 参数全部携带在url中,方便观看 可以做资源定位 缺点 url中的大小有限制 安全性差(所有的参数全部在url中携带) get请求不能有请求实体 get请求一般用来做查询 POST post请求可以有请求实体 post请求可以和get请求一样在请求的url中携带数据 POST只是相对安全,相对安全是因为http本身是明文的,也就是说即使是POST请求,我们也可以通过抓包来获取请求实体中的内容; POST请求如果数据在请求实体中携带,
Java取消代理_HAProxy - 取消请求
weixin_39797780的博客
03-08 227
我们在所有应用程序之前都有一个HAProxy . 它将所有http流量重定向到https，管理ssl并进行一些重写，将请求分割为 /* 和 /api/* 到不同的后端 .一个后端处理可以运行最多3分钟的请求 . 此请求可以经常被触发，但也会经常被取消：为减少负载，后端服务器处理已取消的请求并停止工作 . 但是在HAProxy之间，我的后端服务器无法识别已取消的请求 . 我认为 option abo...
Service——(3)向后台Service发送工作请求
ai-exception的博客
04-26 308
本文始发于github，由于文内部分链接使用的是相对路径，如果访问不到，请移步github项目内阅读即可正常访问。 原文(英文)地址 上一篇文章介绍了如何创建一个JobIntentService类.这篇文章将介绍如何通过一个Intent来触发JobIntentService去执行一个操作，这个Intent中也可以用于JobintentService执行任务（操作）的一些数据。 创建工作请求并将其发...
vue优化项目结构之service请求篇
weixin_30533797的博客
07-10 1328
敲代码要有点逼格、要有点追求、 1.暴露问题 一般地，我们在vue项目中经常会用到vue-resource或者axios来进行网络数据请求、刚接触不久的同学会很自然的直接调用其api来进行请求，例如： 这种将url直接写死的，直接拖出去打死吧、【如果服务地址发生变化，整个项目接口都需要去更改】 这种稍微好点的，知道将地址配成一个全局变量。【总感觉还是太过累赘，而且并不能...
Service详解
stulcc的博客
09-21 405
Service
vue 组件的封装之基于axios的ajax请求方法
01-19
let service = { url: 'http://host.xxxxx.com/xxx.php' } service.ajaxReuqest = (url, options, type, fileFlag) => { for (const i in options) { if (!options[i] && options[i] !== 0 && (options[i].length...
phprest-service-request-filter:Phprest请求过滤服务
05-25
Phprest请求过滤服务描述请求筛选服务，可通过以下方式筛选您的传入请求： 询问种类限制抵消组件过滤有3个主要组成部分： 取得者解析器处理器取得者是您从请求中获取过滤键及其数据的方式。 例如：解析器是您分析...
请求前端
02-26
您还可以使用ng generate directive|pipe|service|class|guard|interface|enum|module 。 建造 运行ng build来构建项目。 构建工件将存储在dist/目录中。 使用--prod标志进行生产构建。 运行单元测试 运行ng test...
http请求
02-17
您还可以使用ng generate directive|pipe|service|class|guard|interface|enum|module 。 建造 运行ng build来构建项目。 构建工件将存储在dist/目录中。 使用--prod标志进行生产构建。 运行单元测试 运行ng test...
IMXWRS:Interplex MX豁免请求系统
03-27
您还可以使用ng generate directive|pipe|service|class|guard|interface|enum|module 。 建造 运行ng build来构建项目。 构建工件将存储在dist/目录中。 使用--prod标志进行生产构建。 运行单元测试 运行ng test以...
浅谈Vue网络请求之interceptors实际应用
08-27
主要介绍了浅谈Vue网络请求之interceptors实际应用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
service方法重定向和请求转发
wyc_1314的博客
10-28 870
1.service方法处理请求/响应 对于每一个HTTP请求，servlet容器会创建一个封装了HTTP请求的ServletRequest实例传递给servlet 的service方法，ServletResponse则表示一个Servlet响应，其隐藏了将响应发给浏览器的复杂性。 通过ServletRequest的方法你可以获取一些请求相关的参数，而ServletResponse则可以将设置一些返 回参数信息，并且设置返回内容。 a.HttpServlet中的service方法： b. 常用方法 Reque
vue 请求拦截器配置
CCKing7的博客
01-02 3531
vue 请求拦截器
Vue 拦截器原理和详细使用
路虽远行则将至，事虽难做则必成。
11-28 8799
了解request.js作用， 快速编写基础的代码，了解其原理，根据不同的需求，书写相应的代码。
CDI services--interceptors(拦截器)
weixin_30480651的博客
04-14 150
1.拦截器综述 拦截器的功能是定义在Java拦截器规范。 拦截器规范定义了三种拦截点: 业务方法拦截, 生命周期回调侦听, 超时拦截(EJB)方法。 在容器的生命周期中进行拦截 public class DependencyInjectionInterceptor { @PostConstruct public void injectDependen...
二级列表
安稳最好啦！的博客
03-08 134
1.封装请求 public class HttpUtils&lt;T&gt; { //单例模式 private HttpUtils(){}; public static HttpUtils getHttpInstance(){ return HttpInstance.httpUtils; } public static class HttpInstance{ public stat...
vue中设置interceptors拦截器
LR13567的博客
04-10 1554
// 全局请求头中添加token axios.interceptors.request.use(request => { let token = localStorage.getItem("token"); if (token) { // request.headers['Authorization'] = 'Bearer ' + token request.head...
axios 源码精读
qq_39025670的博客
03-04 2666
前言 阅读框架源码的好处在于提升编程水平，以及了解框架的设计思想，配合其官方文档，让我们对它的使用变得更加得心应手。 axios 是一个小而精的框架，不像 vue 那般庞大复杂让人望而生畏，阅读也起来相对容易。在阅读源码前，建议掌握 call、apply、bind，Promise，闭包，this 指向，原型链等知识，以及一些设计模式。 1.目录结构 axios 的源码在 lib 目录，其结构如下 在正式介绍源码前，先回顾一下 axios 的常见的使用姿势，以便更好的理解源码。 2.axios 的使用姿势
vue项目之请求拦截器(接口响应之前默认给所有接口加上某些参数)
zezejingi的博客
02-23 5708
vue项目之请求拦截器(接口响应之前默认给所有接口加上某些参数) 一、在request.js中的请求拦截器里面添加如下代码 service.interceptors.request.use( config => { //请求之前需要添加参数的方法 requestMethod(config) } ) 请求方式不同 要拿的参数也不相同，主要事post请求 post请求 get、put、delete请求 在接口请求前添加以下方法的代码 function requestMethod(config) {
vue统一封装axios请求 取消重复请求
最新发布
04-05
在Vue项目中，我们通常会使用axios来发送请求。为了方便管理和维护代码，我们可以将axios请求...在每次请求完成之后，我们会再次调用removePending函数，用来删除已经取消的请求记录。这样就可以避免重复请求的问题了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值