准备

在实现前我们需要用json-server搭建一个REST接口，这是大神弄好的一个包，直接用就行了，30s足矣，用来方便测试，可以到npm上看使用:json-server

搭建好之后，我们就可以用它提供的接口来测试我们自己封装的axios是否可行
代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div><button onclick="testGet()">GET请求</button><button onclick="testPost()">POST请求</button><button onclick="testPut()">PUT请求</button><button onclick="testDelete()">DELETE请求</button></div>
</body>
<script>function testGet() {axios({url:'http://localhost:3000/posts',method:'GET',params:{id:1}}).then(response => {console.log(response)},error => {alert(error.message)})}function testPost() {axios({url:'http://localhost:3000/posts',method:'POST',data:{"title": "json-server3----", "author": "typicode3-----"}}).then(response => {console.log(response)},error => {alert(error.message)})}function testPut() {axios({url:'http://localhost:3000/posts/1',method:'put',data:{"title": "json-server3+++", "author": "typicode3+++"}}).then(response => {console.log(response)},error => {alert(error.message)})}function testDelete() {axios({url:'http://localhost:3000/posts/1',method:'delete',}).then(response => {console.log(response)},error => {alert(error.message)})}/*1. 函数的返回值为 promise, 成功的结果为 response, 失败的结果为 error 2. 能处理多种类型的请求: GET/POST/PUT/DELETE 3. 函数的参数为一个配置对象 { url: '', // 请求地址 method: '', // 请求方式 GET/POST/PUT/DELETE params: {}, // GET/DELETE 请求的 query 参数 data: {}, // POST 或 DELETE 请求的请求体参数 } 4. 响应 json 数据自动解析为 js*///自己封装axiosfunction axios({url,method='GET',params={},data={}}) {//返回一个 Promise 对象return new Promise((resolve,reject) => {method = method.toUpperCase()//处理query参数(拼接到url上)let queryString = ''Object.keys(params).forEach(key => {queryString += `${key}=${params[key]}&`})if(queryString){//去除最后的&queryString = queryString.substring(0,queryString.length-1)//拼接到url上url += '?' + queryString} //1.执行异步ajax请求//创建xhr对象const request = new XMLHttpRequest()//打开连接(初始化请求，没有请求)request.open(method,url,true)//发送请求if(method === 'GET' || method === 'DELETE'){request.send()}else if(method === 'POST' || method === 'PUT'){request.setRequestHeader('Content-Type','application/json;charset=utf-8') //告诉服务器请求体的格式是jsonrequest.send(JSON.stringify(data))}//绑定状态改变的监听request.onreadystatechange = () =>{//如果请求没有完成，直接结束if(request.readyState !== 4){return}//如果响应状态码在[200,300)之间代表成功，否则失败const {status,statusText} = request//2.1 如果请求成功了，调用resolve()if(status>=200 && status<=299){//准备结果对象const response = {data: JSON.parse(request.response),status,statusText,}resolve(response)}else{//2.2 如果请求失败了，调用reject()reject(new Error('request error status is ' + status))}}})}
</script>
</html>

自实现微微型axios相关推荐

自己动手写个微型 CSDN 吧，还能实现网页版 Blink，No.1
橡皮擦,一个逗趣的互联网高级网虫.新的系列,让我们一起进入 Django 世界. 滚雪球学 Python 第三轮十九.微微型 CSDN 项目 19.1 补充知识之 Django 后台模型方法篇 19 ...
基于FPGA的电子计算器设计（上）
今天给大侠带来基于FPGA的电子计算器设计,由于篇幅较长,分三篇.今天带来第一篇,上篇,话不多说,上货. 导读本篇介绍了一个简单计算器的设计,基于 FPGA 硬件描述语言 Verilog HDL,系 ...
无惧NB-IoT，LoRa阵营主攻手Semtech推出新工具
谈到物联网,就不得不提到低功耗广域网络的相关技术,其中最引人注目的就是NB-IoT以及LoRa.有数据显示,从2017年到2021年,低功耗广域物联网市场份额将增长89.3%,该部分收入将从1010亿 ...
ASP.NET Core微服务(四)——【静态vue使用axios解析接口】
ASP.NET Core微服务(二)--[ASP.NET Core Swagger配置]: 环境:win10专业版+vs2019+sqlserver2014/2019+vsCode+在线资源 boot ...
微型机器人革命：微若尘埃智比爬虫
这些带有小小肢体.微型传感器并由硅芯片冲压制成的机器人,在不久的将来或可帮助我们修复手机电池以及进行人类大脑研究. 来源:科技行者 2019年5月13日关键字:机器人微型机器人人工智能来源 | ...
集成微控制器使太阳能微型逆变器设计成本有效
微逆变器提供的太阳能收集在个人面板提供电源转换的一种有效的解决方案.高度集成的MCU的出现提供了微逆变器的设计一个有吸引力的方法,提供一个选项,降低了复杂度,限制了微逆变器广泛应用在过去的成本.今天, ...
计算机英语教学教案模板,【英语微课教学设计模板】微型课模板教学设计
[www.cddlwy.com--教学设计] 尊敬的各位评委老师大家好!我的微型课题目为< >.(0.5分钟) 上课,同学们好!请坐.(声音洪亮充满教室,有鞠躬动作,表情愉快,目视评委) ...
微型微通道输送系统店学生兼职业务的实施方案
大学生活丰富多彩.但大多数人还是认为虚度光阴,怎样充分利用这些业余时间.发展自己的兼职业务呢?这里,微铺子给大家简介一下大学生怎样在校期间,利用微信送餐系统.自主创业! 微信就不多介绍了,差点儿人手都 ...
基于遗传算法的微电网调度(风、光、蓄电池、微型燃气轮机）（Matlab代码实现）

自实现微微型axios

axios

准备

自实现微微型axios相关推荐

最新文章

热门文章