自定义 axios
自定义 axios
function axios({
url,
method = 'GET',
params = {},
data = {}
}) {
// 返回一个 promise 对象
return new Promise((resolve, reject) => {
// 处理 query 参数(拼接到url上) id=1&xxx=abc
// {id: 1, xxx: 'abc'}
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') {
// 告诉服务器请求的格式是 json
request.setRequestHeader('Content-Type', 'application/json;chaset=utf-8')
// 发送 json 格式请求体数据
request.send(JSON.stringify(data))
}
// 绑定状态改变的监听
request.onreadystatechange = function() {
// 如果请求没有完成,直接结束
if (request.readyState !== 4) {
return
}
// 如果状态码在 [200, 300) 范围内表示成功,否则失败
const {status, statusText} = request
// 2.1 如果请求成功了,调用 resolve()
if (status <= 200 && status < 300) {
// 准备结果数据对象 response
const response = {
data: JSON.parse(request.response),
status,
statusText
}
resolve(response)
} else { // 2.2 如果请求失败了,调用 reject()
reject(new Error('request error status is ' + status + ',' + statusText))
}
}
})
}
自定义 axios的更多相关文章
- HTTP库Axios
前面的话 本文将详细介绍HTTP库Axios 概述 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中 [安装] 在Vue中使用,最好安装两个模块axios ...
- axios介绍与使用说明 axios中文文档
本周在做一个使用vuejs的前端项目,访问后端服务使用axios库,这里对照官方文档,简单记录下,也方便大家参考. Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node ...
- Axios 使用文档
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 使用实例:http://www.cnblogs.com/coolslider/p/7838309.ht ...
- Axios 中文说明
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. Features 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http ...
- Axios
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端.简单的理解就是ajax的封装 它本身具有以下特征: a.从浏览器中创建 XMLHttpRequest b ...
- 一个axios的简单教程
转载于:https://www.jianshu.com/p/13cf01cdb81f 转载仅供个人学习 首先要明白的是axios是什么:axios是基于promise(诺言)用于浏览器和node.js ...
- axios,vue-axios在项目中的应用
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中 关于axios的功能: 1,从浏览器中创建XMLHttpRequests 2,从node.js常见Htt ...
- axios中文文档
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. Features 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http ...
- Axios的详细配置和相关使用
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. Features 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http ...
随机推荐
- python+selenium之浏览器滚动条操作
from selenium import webdriver import time #访问百度 driver=webdriver.Ie() driver.get("http://www.b ...
- win10蓝牙鼠标无法连接,需pin码
从控制面板进到"设备和打印机",点击"添加设备" 鼠标切换到匹配模式,就可以看到自己的鼠标了,点"下一步" 出现了一样的画面,是的,不用输P ...
- Chrome浏览器启动参数大全(命令行参数)
前言 在开发Web项目当中,浏览器必不可少,而浏览器的启动参数可以帮我们实现很多功能. 常用参数 常用参数请参考下表. 序号 参数 说明 1 --allow-outdated-plugins 不停用过 ...
- 实现线程按顺序输出ABC
线程按顺序输出ABC 实现描述:建立三个线程A.B.C,分别按照顺序输出十次ABC 首先建立一个方法,按照条件进行输出 class PrintABC{ private int index=0; pub ...
- SphereEx 公司成立,推动 Apache ShardingSphere 社区加速发展
近日,SphereEx 商业公司在中国红杉种子基金及初心资本助力下,已完成公司及团队组建.各大媒体平台及公众号已相继报道,并抢占新闻头条.作为以 Apache ShardingSphere 核心团队组 ...
- 8086的复位与启动 CPU执行指令的步骤
东北大学-计算机硬件技术基础 CPU执行指令的步骤 取指令 Fetch 指令译码 Decode 执行指令 Execute 回写 Write-back 修改指令指针 取指令 将CS和IP的内容通过地址加 ...
- 关于 WinDoAdmin
WinDoAdmin(有温度,更有深度) an amazing winform admin 框架描述 最新基于Winform实现的Web样式中后台解决方案,大型企业级开发框架. 如果你要使用Winfo ...
- Visual Studio Debug only user code with Just My Code
Debug only user code with Just My Code By default, the debugger skips over non-user code (if you wan ...
- 【死磕 NIO】— Reactor 模式就一定意味着高性能吗?
大家好,我是大明哥,我又来了. 为什么是 Reactor 一般所有的网络服务,一般分为如下几个步骤: 读请求(read request) 读解析(read decode) 处理程序(process s ...
- 想要彻底搞懂大厂是如何实现Redis高可用的?看这篇文章就够了!(1.2W字,建议收藏)
高可用HA(High Availability)是分布式系统架构设计中必须考虑的因素之一,它通常是指,通过设计减少系统不能提供服务的时间. 假设系统一直能够提供服务,我们说系统的可用性是100%.如果 ...