用XHR简单封装一个axios
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>XHR</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> <script>
function testGet() {
axios({
url: "http://localhost:3000/posts",
params: {
id: 1
}
}).then(
response => {
console.log(response);
},
error => {
console.log(error.message);
}
);
} function testPost() {
axios({
url: "http://localhost:3000/posts",
method: "POST",
data: {
title: "--POST添加上去的",
author: "--POST添加---",
id: 4
}
}).then(
response => {
console.log(response);
},
error => {
console.log(error.message);
}
);
} // axios 简单封装
function axios({ url, method = "GET", params = {}, data = {} }) {
// 返回一个promise对象
return new Promise((resolve, reject) => { // 处理metho(转大写)
method = method.toUpperCase()
// 处理query参数(拼接到url上) id=1&aaa=ccc
/*{
id: 1,
aaa: ccc
}*/
let queryString = "";
Object.keys(params).forEach(key => {
queryString += `${key}=${params[key]}&`;
});
// 判断queryString有没有值
if (queryString) {
// 去除最后的&
queryString = queryString.substring(0, queryString.length - 1);
// 接到url上
url += "?" + queryString;
}
console.log(queryString);
// 1.执行异步ajax请求
// 创建xhr对象
const request = new XMLHttpRequest(); // 打开链接(初始化请求，没有请求)
request.open(method, url, true);
// 发送请求
if (method === "GET") {
request.send();
} else if (method === "POST") {
request.setRequestHeader(
"Content-Type",
"application/json;charset=utf-8"
); // 告诉服务器请求体的格式是JSON格式
request.send(JSON.stringify(data)); // 发送JSON格式的请求体参数
} //绑定状态改变的监听
request.onreadystatechange = function() {
// 如果请求没有完成，直接结束
if (request.readyState !== 4) {
return;
}
// 如果响应状态码在[200,300)之间表示请求成功，否则失败
const { status, statusText } = request;
if (status >= 200 && status < 300) {
// 准备结果数据对象response
const response = {
data: JSON.parse(request.response),
status,
statusText
};
// 2.1如果请求成功了，调用resolve()
resolve(response);
} else {
// 2.2如果请求失败，调用reject()
reject(new Error("request error status is " + status));
}
};
});
}
</script>
</body>
</html>
用XHR简单封装一个axios的更多相关文章
- Swift - 简单封装一个工具类模板
创建模板类(封装一个类) 例1:新建一个名字叫做 Product 的类 Product.swift File 的内容 class Product { var name: String var desc ...
- 利用jdbc简单封装一个小框架（类似DBUtils）
利用jdbc写的一个类似DBUtils的框架 package com.jdbc.orm.dbutils; import java.io.IOException; import java.io.Inpu ...
- 封装一个axios请求后台的通用方法
import axios from 'axios'; import constant from '@/js/const'; import alert from '@/js/alertView'; le ...
- es6 简单封装一个 省市县三级下拉框
废话不多说,直接上效果图和代码: 1,index.js function $(el){ return document.getElementById(el) } let render = Symbol ...
- 基于iview 封装一个vue 表格分页组件
iview 是一个支持中大型项目的后台管理系统ui组件库,相对于一个后台管理系统的表格来说分页十分常见的 iview是一个基于vue的ui组件库,其中的iview-admin是一个已经为我们搭好的后天 ...
- swift开发之--简单封装Alamofire请求类以及简单使用SnapKit
以前在swift3的时候,写过类似的,那个时候还没有很成熟的网络请求类库,在这里,还是衷心感谢大神们的付出! 具体效果如下,先上图: 点击按钮的时候,请求数据,数据结构如下: { ; reason = ...
- vue axios 简单封装以及思考
先安装 axios npm install axios axios的详细介绍以及用法 就不多说了请 移步 github ➡️ https://github.com/axios/axios 下面是简单 ...
- 简单封装axios api
可以在代码逻辑中写axios请求,处理请求结果,但是随着项目越来越大,代码会很繁琐,不容易维护,所以,可以把一些在所有请求中都要处理的逻辑抽取出来,封装成api方法.比如每次请求中都要判断是否有权限, ...
- axios简单封装
写在最前面 新手前端刚刚接触vue,感觉真的好用.项目中需要使用axios,然后学习了一下.借鉴网上一些大佬的经验,现在分享一下axios的简单封装,如果有什么错误的地方,请大家指出. axios安装 ...
随机推荐
- Spring Boot Web开发与thymeleaf模板引擎
简介: 使用Springboot应用,选中需要的模块, Spring已经默认将场景配置好了,只需在配置文件中少量配置就可以运行起来 自己编写业务代码 自动配置原理 这个场景Springboot帮我们配 ...
- JAVA杂记
写在前面:期末考试要来了,对于一个暑假自学了几天JAVA之后一个学期划水的人来说现在就是踏上了JAVA预习之路.下面是自己xjb记的东西,主要是根据老师给的流程图总结的自己认为需要的一些零碎的小知识, ...
- 【转】CAP 定理的含义
原文链接:CAP 定理的含义 作者: 阮一峰 日期: 2018年7月16日 分布式系统(distributed system)正变得越来越重要,大型网站几乎都是分布式的. 分布式系统的最大难点,就是各 ...
- 集合系列 Map（十四）：WeakedHashMap
WeakedHashMap 也是 Map 集合的哈希实现,但其余 HashMap 的不同之处在于.其每个节点的 value 引用是弱引用,可以方便 GC 回收. public class WeakHa ...
- 实战Netty集群
疯狂创客圈 Java 分布式聊天室[ 亿级流量]实战系列之 -25[ 博客园 总入口 ] 1.写在前面 1.1 实战Netty集群的理由 Java基础练习中,一个重要的实战练习是: java的聊天程序 ...
- Selenium 与自动化测试 —— 《Selenium 2 自动化测试实战》读书笔记
背景 最近在弄 appium,然后顺便发现了 Selenium 框架和这本书,恰好这本书也介绍了一些软件测试&自动化测试的理论知识,遂拿过来学习学习.所以本文几乎没有实践内容,大多都是概念和工 ...
- WebShell代码分析溯源(八)
WebShell代码分析溯源(八) 一.一句话变形马样本 <?php $e=$_REQUEST['e'];$arr= array('test', $_REQUEST['POST']);uasor ...
- 每天3分钟操作系统修炼秘籍（12）：OOM和swap分区
点我查看秘籍连载 OOM和swap分区 进程的虚拟内存空间是映射到整个物理内存空间的,所以在进程自身看来它拥有了整个物理内存,它也能使用整个物理内存,只需在使用的时候请求操作系统帮忙分配更多空间即可. ...
- Android 使用 aapt 命令查看 apk 包名
一.aapt 是什么 aapt 即Android Asset Packaging Tool,在SDK的build-tools目录下.该工具可以查看,创建, 更新ZIP格式的文档附件(zip, jar, ...
- C#&.Net干货分享- 构建Spire-Office相关Helper操作Word、Excel、PDF等
先下载好如下的组件: 直接使用完整源码分享: namespace Frame.Office{ /// <summary> /// Spire_WordHelper /// ...