js fetch请求中断的几种方式

这篇具有很好参考价值的文章主要介绍了js fetch请求中断的几种方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、通过AbortController

这是官方标准手段,真正意义的阻止请求(不支持ie)

后端接口设置的两秒返回数据

function myFetch() {
    const controller = new AbortController();
    const signal = controller.signal;

    fetch('http://localhost:3000/aaa/bbb', {
        method: 'post',
        signal,
        headers: {
            'Content-Type': 'application/json'
        }
    }).then(res => res.json()).then(res => {
        console.log(res);
        return res;
    }).catch(e => {
        console.log(e);
    })

    // setTimeout(()=> {
    //     controller.abort();
    // }, 1000)
}

默认结果:
js fetch请求中断的几种方式,javascript,前端,开发语言
解开定时器后:
js fetch请求中断的几种方式,javascript,前端,开发语言

js fetch请求中断的几种方式,javascript,前端,开发语言

2、模拟中断

通过promise,成功用resolve返回,失败用reject返回(浏览器上,请求依然会发出,并得到响应)
第一种方法:

function getData() {
    return new Promise((resolve, reject) => {
        myFetch().then(res => {
            resolve(res);
        });
        setTimeout(() => {
            reject({
                code: '500',
                msg: '请求失败'
            })
        }, 1000);
    })
}

async function gotData() {
    try {
        const data = await getData();
        console.log(data);
    } catch (error) {
        console.log(error);
    }
}
gotData();

运行结果:
js fetch请求中断的几种方式,javascript,前端,开发语言
第二种方法:文章来源地址https://www.toymoban.com/news/detail-657357.html

function getData() {
    let myReject = null;
    let myPromise = new Promise((resolve, reject) => {
        myReject = reject;
        myFetch().then(res => {
            resolve(res);
        });
    });

    myPromise.abort = () => myReject({
        code: '500',
        msg: '请求失败'
    });
    return myPromise;
}

async function gotData() {
    const result = getData();
    result.then(res => {
        console.log(res);
    }).catch(e => {
        console.log(e);
    })
    setTimeout(() => {
        result.abort();
    }, 1000);
}
gotData();

到了这里,关于js fetch请求中断的几种方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端网络请求之JavaScript XHR、Fetch、Axios

    AJAX:一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。在不重新加载整个网页的情况下,对网页的某部分进行更新 Fetch:基于 promise 设计的。Fetch 的代码结构比起 ajax 简单多。fetch 不是 aj

    2024年01月23日
    浏览(48)
  • JavaScript深浅拷贝的几种方式

    深浅拷贝主要是针对于引用类型而言的 1. JSON.parse(JSON.strigify(Str)) JSON.stringify() 该方法用于将一个字转换为JSON字符串,该字符串符合JSON格式,并且可以被JSON.parse()方法还原。 对于原始类型的字符串,转换结果会带双引号 如果要转换的对象的属性是undefined,函数或xml对象,该

    2024年01月19日
    浏览(49)
  • HTTP请求的几种方式

    HTTP(Hypertest Transfer Protocol)是用于传输像HTML这样的超文本文件的应用层协议。它被设计用于WEB浏览器端和WEB服务端的交互,但也有其它用途。HTTP遵循经典的client-server模型,客户端发起请求尝试建立连接,然后等待服务端的应答。HTTP是无状态协议,这意味着服务端在两次请求间

    2024年02月08日
    浏览(50)
  • 【JavaScript】 发送 POST 请求并带有 JSON 请求体的几种方法

     在现代的前端开发中,与后端进行数据交互是必不可少的。其中,发送 POST 请求并带有 JSON 请求体是一种常见的需求。在本文中,我们将介绍在 JavaScript 中实现这一需求的几种方法。   XMLHttpRequest 是一种传统的发送网络请求的方式。以下是一个使用 XMLHttpRequest 发送 POST 请

    2024年03月19日
    浏览(60)
  • JavaScript打开新窗口的几种方式

    window.location.href window.open 指定参数 NewUrl //’ 弹出窗口的地址; ‘newwindow’ //弹出窗口的名字,非必须,可用空’\\\'代替; height=600 //窗口高度; width=900 //窗口宽度; top=0 //窗口距离屏幕上方的象素值; left=0 //窗口距离屏幕左侧的象素值; toolbar=no //是否显示工具栏,yes为显示

    2024年02月14日
    浏览(39)
  • JavaScript里实现继承的几种方式

    JavaScript 中的继承可以通过以下几种方式来实现: 1、原型链继承 :通过将子类的原型对象指向父类的实例来实现继承。这种方式的优点是实现简单,缺点是父类的私有属性和方法子类是不能访问的。   2、借用构造函数继承 :通过在子类的构造函数中调用父类的构造函数来

    2023年04月23日
    浏览(49)
  • JavaScript 判断是否为数字的几种方式

    喜欢博主的文章,欢迎关注、点赞👍、收藏⭐️、留言📝支持,谢谢大家 js判断是否为数字的方式很多: typeof 、 instanceof 、 Number.isNumber parseInt 、 parseFloat isNaN 、 isFinite Number.isNaN 、 Number.isFinite 正则表达式 终极方案 我们逐一介绍,希望能帮到大家。 typeof 判断值是不是基

    2023年04月10日
    浏览(63)
  • 构造http请求的几种方式(附源码)

    博主个人社区:开发与算法学习社区 博主个人主页:Killing Vibe的博客 欢迎大家加入,一起交流学习~~ form (表单) 是 HTML 中的一个常用标签. 可以用于给服务器发送 GET 或者 POST 请求. form 的重要参数: action: 构造的 HTTP 请求的 URL 是什么. method: 构造的 HTTP 请求的 方法 是 GET 还是

    2023年04月09日
    浏览(45)
  • 接口测试-关于postman的几种参数请求方式

    (1)POST的数据类型 对于post请求方式,一般都是要对请求发送相应的一些参数的,而参数的注入一般填写在Body中。  如上图所示,在Body中,有多种类型选择: none:一般都不使用 form-data:  对于form-data,是采用键值对的方式进行存储,即将该表单的数据组织成Key-Value形式,

    2024年02月12日
    浏览(72)
  • 使用OkHttp发送POST请求的几种方式

    本文将介绍 OkHttp 客户端的基本用法。 主要介绍 OkHttp 3.x 版本中发送Post请求的几种方式。 使用 FormBody.Builder 构造基本的 RequestBody , 包含两个参数:用户名、密码,发送 POST请求。 如果要对请求进行身份验证,可以使用 Credentials.basic 构建器向请求头中添加凭据。 下面代码给

    2024年02月13日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包