自定义 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的更多相关文章

  1. HTTP库Axios

    前面的话 本文将详细介绍HTTP库Axios 概述 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中 [安装] 在Vue中使用,最好安装两个模块axios ...

  2. axios介绍与使用说明 axios中文文档

    本周在做一个使用vuejs的前端项目,访问后端服务使用axios库,这里对照官方文档,简单记录下,也方便大家参考. Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node ...

  3. Axios 使用文档

    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 使用实例:http://www.cnblogs.com/coolslider/p/7838309.ht ...

  4. Axios 中文说明

    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. Features 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http  ...

  5. Axios

    axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端.简单的理解就是ajax的封装 它本身具有以下特征: a.从浏览器中创建 XMLHttpRequest     b ...

  6. 一个axios的简单教程

    转载于:https://www.jianshu.com/p/13cf01cdb81f 转载仅供个人学习 首先要明白的是axios是什么:axios是基于promise(诺言)用于浏览器和node.js ...

  7. axios,vue-axios在项目中的应用

    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中 关于axios的功能: 1,从浏览器中创建XMLHttpRequests 2,从node.js常见Htt ...

  8. axios中文文档

    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. Features 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http  ...

  9. Axios的详细配置和相关使用

    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. Features 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http  ...

随机推荐

  1. python+selenium之浏览器滚动条操作

    from selenium import webdriver import time #访问百度 driver=webdriver.Ie() driver.get("http://www.b ...

  2. win10蓝牙鼠标无法连接,需pin码

    从控制面板进到"设备和打印机",点击"添加设备" 鼠标切换到匹配模式,就可以看到自己的鼠标了,点"下一步" 出现了一样的画面,是的,不用输P ...

  3. Chrome浏览器启动参数大全(命令行参数)

    前言 在开发Web项目当中,浏览器必不可少,而浏览器的启动参数可以帮我们实现很多功能. 常用参数 常用参数请参考下表. 序号 参数 说明 1 --allow-outdated-plugins 不停用过 ...

  4. 实现线程按顺序输出ABC

    线程按顺序输出ABC 实现描述:建立三个线程A.B.C,分别按照顺序输出十次ABC 首先建立一个方法,按照条件进行输出 class PrintABC{ private int index=0; pub ...

  5. SphereEx 公司成立,推动 Apache ShardingSphere 社区加速发展

    近日,SphereEx 商业公司在中国红杉种子基金及初心资本助力下,已完成公司及团队组建.各大媒体平台及公众号已相继报道,并抢占新闻头条.作为以 Apache ShardingSphere 核心团队组 ...

  6. 8086的复位与启动 CPU执行指令的步骤

    东北大学-计算机硬件技术基础 CPU执行指令的步骤 取指令 Fetch 指令译码 Decode 执行指令 Execute 回写 Write-back 修改指令指针 取指令 将CS和IP的内容通过地址加 ...

  7. 关于 WinDoAdmin

    WinDoAdmin(有温度,更有深度) an amazing winform admin 框架描述 最新基于Winform实现的Web样式中后台解决方案,大型企业级开发框架. 如果你要使用Winfo ...

  8. 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 ...

  9. 【死磕 NIO】— Reactor 模式就一定意味着高性能吗?

    大家好,我是大明哥,我又来了. 为什么是 Reactor 一般所有的网络服务,一般分为如下几个步骤: 读请求(read request) 读解析(read decode) 处理程序(process s ...

  10. 想要彻底搞懂大厂是如何实现Redis高可用的?看这篇文章就够了!(1.2W字,建议收藏)

    高可用HA(High Availability)是分布式系统架构设计中必须考虑的因素之一,它通常是指,通过设计减少系统不能提供服务的时间. 假设系统一直能够提供服务,我们说系统的可用性是100%.如果 ...