实现简易axios

  1. /*
  2. 1.函数的返回值为promise, 成功的结果为response, 失败的结果为error
  3. 2.能处理多种类型的请求: GET/POST/PUT/DELETE
  4. 3.函数的参数为一个配置对象
  5. {
  6. url: '', // 请求地址
  7. method: '', // 请求方式GET/POST/PUT/DELETE
  8. params: {}, // GET/DELETE请求的query参数
  9. data: {}, // POST或DELETE请求的请求体参数
  10. }
  11. 4.响应json数据自动解析为js的对象/数组
  12. */
  13. function axios({
  14. url,
  15. method='GET',
  16. params={},
  17. data={}
  18. }) {
  19. // 返回一个promise对象
  20. return new Promise((resolve, reject) => {
  21.  
  22. // 处理method(转大写)
  23. method = method.toUpperCase()
  24.  
  25. // 处理query参数(拼接到url上) id=1&xxx=abc
  26. /*
  27. {
  28. id: 1,
  29. xxx: 'abc'
  30. }
  31. */
  32. let queryString = ''
  33. Object.keys(params).forEach(key => {
  34. queryString += `${key}=${params[key]}&`
  35. })
  36. if (queryString) { // id=1&xxx=abc&
  37. // 去除最后的&
  38. queryString = queryString.substring(0, queryString.length-1)
  39. // 接到url
  40. url += '?' + queryString
  41. }
  42.  
  43. // 1. 执行异步ajax请求
  44. // 创建xhr对象
  45. const request = new XMLHttpRequest()
  46. // 打开连接(初始化请求, 没有请求)
  47. request.open(method, url, true)
  48.  
  49. // 发送请求
  50. if (method==='GET' || method==='DELETE') {
  51. request.send()
  52. } else if (method==='POST' || method==='PUT'){
  53. request.setRequestHeader('Content-Type', 'application/json;charset=utf-8') // 告诉服务器请求体的格式是json
  54. request.send(JSON.stringify(data)) // 发送json格式请求体参数
  55. }
  56.  
  57. // 绑定状态改变的监听
  58. request.onreadystatechange = function () {
  59. // 如果请求没有完成, 直接结束
  60. if (request.readyState!==4) {
  61. return
  62. }
  63. // 如果响应状态码在[200, 300)之间代表成功, 否则失败
  64. const {status, statusText} = request
  65. // 2.1. 如果请求成功了, 调用resolve()
  66. if (status>=200 && status<=299) {
  67. // 准备结果数据对象response
  68. const response = {
  69. data: JSON.parse(request.response),
  70. status,
  71. statusText
  72. }
  73. resolve(response)
  74. } else { // 2.2. 如果请求失败了, 调用reject()
  75. reject(new Error('request error status is ' + status))
  76. }
  77. }
  78. })
  79. }

nodejs 中的一些方法的更多相关文章

  1. nodeJS中读写文件方法的区别

    导言:nodejs中所有与文件相关的操作都在fs模块中,而读写操作又是我们会经常用到的操作,nodejs的fs模块针对读操作为我们提供了readFile,read, createReadStream三 ...

  2. 介绍nodejs中的path模块的几个方法

    webpack中常用的: var path = require('path') 是nodejs中的path模块,介绍一下webpack中常用的几个path模块的方法: 应用node环境的时候,这个pa ...

  3. nodejs中的fs模块中的方法

    nodejs中的fs模块 引入模块 const fs =require("fs") 检测文件是否存在fs.stat(path,callback) fs.stat("./n ...

  4. nodejs中获取时间戳、时间差

    Nodejs中获取时间戳的方法有很多种,例如: new Date().getTime() Date.now() process.uptime() process.hrtime() 平时想获取一个时间戳 ...

  5. 在Nodejs中如何调用C#的代码

    最近需要在Nodejs中用到C#的代码,从网上了解到可以采用Edgejs来实现Nodejs与C#的代码交互, 直接复制网上的代码运行总是出各种错,填了不少坑,现在把自己的案例代码大致整理一下,方便以后 ...

  6. nodejs 中自定义事件

    经常看到 req.on('error', function(){...}); 这种代码. 在nodejs中,可以使用 EventEmitter来实现. 具体的关键词有如下几个: var reqEven ...

  7. nodejs中Stream的理解

    在nodejs中可以通过fs模块读写文件,我们来看下fs模块提供的接口: fs.readFile(filename, callback) 异步读取文件. filename是读取文件的文件名,如果是相对 ...

  8. 探讨Nodejs中的作用域问题。

    在JS中有全局作用域和函数作用域,而在Nodejs中也自己的作用域,分为全局作用域(global)和模块作用域. js作用域: 以前学js的时候我们的全局对象是window,如: var a = 10 ...

  9. 详细讲解nodejs中使用socket的私聊的方式

    详细讲解nodejs中使用socket的私聊的方式 在上一次我使用nodejs+express+socketio+mysql搭建聊天室,这基本上就是从socket.io的官网上的一份教程式复制学习,然 ...

随机推荐

  1. 【算法】LeetCode算法题-Remove Element

    这是悦乐书的第150次更新,第152篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第9题(顺位题号是27).给定整数数组nums和值val,删除nums中所有的val值, ...

  2. 【Git】Git pull 强制覆盖本地文件

    git fetch --all  git reset --hard origin/master git pull 备注: git fetch 只是下载远程的库的内容,不做任何的合并 git reset ...

  3. 深入理解Java 注解原理

    *注解的用途 注解(Annotation)是JDK1.5引入的新特性,包含在java.lang.annotation包中,它是附加在代码中的一些元信息,将一个类的外部信息与内部成员联系起来,在编 译. ...

  4. 【转】cookie如何共享到各个浏览器

    可以考虑HTML5 localstorage, 点击查看原始尺寸 http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html也 ...

  5. 连接rabbitmq

    #消费者import pika # 连接服务器 credentials = pika.PlainCredentials('*****', '***') connection = pika.Blocki ...

  6. FinalShell安装

    Mac版安装路径/Applications/finalshelldata Linux版安装路径/usr/lib/finalshelldata 注意:1.FinalShell运行需要java或者jdk支 ...

  7. pom文件miss artifact com.sun:tools:jar:1.5.0:system问题

    问题现象: 导入新的maven项目时,有时候pom.xml文件会提示一个错误信息:Missing artifact com.sun:tools:jar:1.5.0:system 问题原因: maven ...

  8. 通俗易懂的php多线程解决方案

    我们在做项目的时候,有些需求,特别是数据的响应处理需要花费大量的时间,由于php是一个短生命周期的脚本语言,到了默认的30秒,php的数据处理还没完成,php的生命周期就结束了.这时需要使用异步并发处 ...

  9. yaml的简单学习

    参考http://www.ruanyifeng.com/blog/2016/07/yaml.html 基本语法规则如下.    •    大小写敏感    •    使用缩进表示层级关系    •   ...

  10. 理解Shadow DOM(一)

    1. 什么是Shadow DOM? Shadow DOM 如果按照英文翻译的话可以理解为 影子DOM, 何为影子DOM呢?可以理解为一般情况下使用肉眼看不到的DOM结构,那如果一般情况下看不到的话,那 ...