首页 > 其他分享 >用Promise封装一个ajax

用Promise封装一个ajax

时间:2023-02-13 11:12:34浏览次数:35  
标签:status 封装 xhr ajax Promise reject new method

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <script>
        function ajaxData(url, method, data) {
            return new Promise((resolve, reject) => {
                var xhr = new XMLHttpRequest();
                xhr.open(url, method);
                if (method == "post") {
                    xhr.setRequestHeader("Content-Type", "application/json");
                }
                xhr.send(data);
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4) {
                        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                            resolve(xhr.response);
                        }
                    } else {
                        reject("请求失败!");
                    }
                };
            });
        }
    </script>
</body>

</html>

 

标签:status,封装,xhr,ajax,Promise,reject,new,method
From: https://www.cnblogs.com/zhaofen/p/17115643.html

相关文章

  • 简单的$.ajax()的请求方式
    $.ajax({url:'http://www.baidu.com',//请求或发送数据的地址type:'POST',//请求方式,POST,GET,PUT,DELECT等data:data,//参数或者数据cache:true,//是......
  • PromiseA+规范
    PromiseA+规范讲解PromiseA+规范前,咱们先来了解一下这些术语,以便在后续提到的时候有明确且统一的概念.术语promise是一个有then方法的对象或者是函数,行为遵循本规......
  • 06 Django与Ajax
    Django与Ajax什么是JSONJSON是轻量级的文本数据交换格式,JSON使用JavaScript语法来描述数据对象,但是JSON仍然独立于语言和平台。JSON解析器和JSON库支持许多不......
  • ajax下载文件(图片/视频/excel)
    //fetch下载文件流functiondownload(url){fetch(url).then(res=>{returnres.blob();//returnres.arrayBuffer();}).then(res=>{......
  • AJAX实现JQuery实现方式get&post
    AJAX-实现-JQuery实现方式-get&postGET<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="js/jquery-3......
  • 前端项目实战24-封装一个下拉框组件
    import{Select}from"antd";typeSelectProps=React.ComponentProps<typeofSelect>;interfaceIdSelectPropextendsOmit<SelectProps,"value"|"onChange"|"o......
  • AJAX实现JQuery实现方式_ajax()
    AJAX-实现-JQuery实现方式-ajax()<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="js/jquery-3.3.1.m......
  • 前端项目实战99-数据postgrest.查看详情接口封装
    getOne:(resource:any,params:any)=>{constkey:any=Object.keys(params)constid=params[key[0]];constprimaryKey=ge......
  • 【AJAX】学习笔记
    00-AJAX介绍AJAX=AsynchronousJavaScriptandXML(异步的JavaScript和XML)。AJAX不是新的编程语言,而是一种使用现有标准的新方法。AJAX最大的优点是在不重新加载......
  • React+hook+ts+ant design封装一个具有动态表格得页面
    前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从......