首页 > 其他分享 >自定义简单的axios方法

自定义简单的axios方法

时间:2023-11-04 17:55:55浏览次数:56  
标签:axios const 自定义 url xhr 简单 new config

    function myAxios(config) {
      return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()

        //如果存在想要放在链接后的参数?name=1&password=2
        if (config.params) {
          const paramsObj = new URLSearchParams(config.params)
          const queryString = paramsObj.toString()
          config.url += `?${queryString}`
        }

        //定义请求方法,还有url
        xhr.open(config.method || 'GET', config.url)

        //xhr发送请求加载完成后,执行
        xhr.addEventListener('loadend', () => {
          if (xhr.status >= 200 && xhr.status < 300) {
            resolve(JSON.parse(xhr.response))
          } else {
            reject(new Error(xhr.response))
          }
        })

        //如果存在json请求体
        if (config.data){
          const jsonStr = JSON.stringify(config.data)
          xhr.setRequestHeader('Content-Type','application/json')
          xhr.send(jsonStr);
        }else {
          xhr.send()
        }

      })
    }

 

标签:axios,const,自定义,url,xhr,简单,new,config
From: https://www.cnblogs.com/cyknote/p/17809611.html

相关文章

  • springboot自定义Starter(超简捷)
    啥也不说,新建一个新的Maven项目引入Spring必要依赖autoconfigure这个依赖是SpringBoot框架的自动配置依赖,它包含了大量的自动配置类,用于根据应用程序的配置和环境,在应用程序启动时自动配置各种组件和属性。通过这个依赖,可以实现一些常见的配置,如数据库连接、缓存、消息队列......
  • filebeat和logstash的简单配置
    filebeat基本配置#输入filebeat.inputs:-type:logenabled:truepaths:-Z:\webman\runtime\logs\ad-*.log#json.keys_under_root:true#json.overwrite_keys:true#json.add_error_key:truefields_under_root:true#这种配置既可以解析json,又......
  • laravel中间件简单实用Middleware 过滤HTTP请求
    1,创建中间件phpartisanmake:middlewareActivery2,中间写过滤publicfunctionhandle($request,Closure$next){if($request->age<20){returnredirect('home');}return$next($request);},3,注册中间件kernelprotected$routeMiddleware=[&......
  • SAP: 简单的ALV 控件实例
    SAPECC6EHP7 简单的ALV控件实例创建ALV过程参考Z_TEST02的操作步骤:在命令栏中输入“SE38”命令,进入如图所示的界面。  以下例子以表(T823D)为例, 使用数据字典定义结构,通过ALV控件显示数据。具体代码如下(ABAP脚本):*&------------------------------------------------......
  • 基于 tesseract-wasm+ fastify 开发一个简单的中文ocr 服务
    以前我简单介绍过tesseract-wasm,基于此wasm包我们可以直接基于nodejs调用tesseract的方法实现ocr处理,以下是一个简单的demo基于fastify开发了一个简单的api,同时包含了一个简单的web可以测试项目结构package.json {"name":"tesseract","versio......
  • 支付宝小程序的级联选择器,对接简单操作,Cascader 级联选择器element_ui
    首先,对于element_ui的动接,由于需要数据格式是 但是支付宝提的接口返回的数据是另一种格式,并且支付宝的三级联动接口是先只有一个列表,点击列表项再发现请求,生成另外一个下拉选择,需要这个三级联动不能直接使用element-ui的三级联动。需要自己实现这个功能 并且支付宝的这个......
  • JUC并发编程学习笔记(六)Callable(简单)
    Callable(简单)callable接口和runnable接口类似,都是为了执行另外一条线程而设计的,区别是Runnable不会返回结果也不会抛出异常。1、可以有返回值2、可以抛出异常3、方法不同;run()/call();Runnable实现Runnable接口,重写run方法,无返回值//原线程classRunnableThreadimple......
  • 简单高效!xmind激活全流程在此!
    xmind相信大部分人都用过,最出名的是它的思维导图功能,我考研的时候就用它做的专业课思维导图,功能这块确实没的说。但是XMind不开VIP功能有限,可VIP的价格又让人望而生畏,于是我找到了一个可以免费激活XMind的路子。激活xmind只需要下载我提供的xmind包和激活程序即可搞定激活,全程傻瓜......
  • C++ float与double类型的简单区别
    1.有效位数与精度有效位和精度的两个概念是不同的,我们先说float和double各自的有效位。在float与double中默认的有效位都是6位有效位,意思就是从第一个不为0的数字算起有6个数字是有效的后边无效的数字也不会显示,如下图:代码:运行结果:可以看出不管你的float定义的有多少位小......
  • Rabbitmq消息队列:Topic话题模式简单应用
    一、生产者声明topic话题模式的交换机,分别发送几条消息到不同的路由key。packagetest.topic;importcom.rabbitmq.client.Channel;importcom.rabbitmq.client.Connection;importutils.RabbitmqConUtil;publicclassGive{//定义交换机privatefinals......