自定义 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. css颜色字符串转换, 字符串转化为驼峰形式

    * 将 rgb 颜色字符串转换为十六进制的形式,如 rgb(255, 255, 255) 转为 #ffffff1. rgb 中每个 , 后面的空格数量不固定2. 十六进制表达式使用六位小写字母3. 如 ...

  2. centos7.0 能ping通ip 无法ping通域名处理方法

    第一步: 检查 vi   /etc/sysconfig/network-scripts/ifcfg-eth0 查看网卡配置里的dns是否与 vi  /etc/resolv.conf 的 nameser ...

  3. Python3入门系列之-----异常处理

    前言 作为 Python 初学者,在刚学习 Python 编程时,经常会看到一些报错信息,在前面我们没有提及,这章节我们会专门介绍. Python 有两种错误很容易辨认:语法错误和异常. Python ...

  4. 基于深度学习的建筑能耗预测02——安装Tensorflow-gpu

    一.检查显卡 ·查看自己的显卡配置是否能支持cuda,以及Tensorflow不同版本要求与CUDA及CUDNN版本对应关系: https://developer.nvidia.com/zh-cn/c ...

  5. 智汀家庭云-开发指南Golang:设备插件开发

    设备插件模块 开发前先阅读插件设计概要:智汀家庭云-开发指南Golang: 插件模块 使用 plugin-sdk 可以忽略不重要的逻辑,快速实现插件 插件实现 获取sdk go get github. ...

  6. Sentry 监控 - Snuba 数据中台架构(Data Model 简介)

    系列 1 分钟快速使用 Docker 上手最新版 Sentry-CLI - 创建版本 快速使用 Docker 上手 Sentry-CLI - 30 秒上手 Source Maps Sentry For ...

  7. 洛谷 P1862 输油管道问题

    题意 题目链接:P1862 输油管道问题 不难看出每个油井的 \(x\) 坐标是没用的,所以问题转化为如下. 代数意义:给出 \(n\) 个数 \(y_1,y_2,\ldots,y_n\),找一个数 ...

  8. 高级爬虫面试题测试题 v1.3

    Python Web高级爬虫工程师测试题 (请本文件发送到: SpiderTestQuestion@163.com 并附带简历) 1. 用yield写一个斐波那契数列的生成器函数. 2. 放一段scr ...

  9. 洛谷4606 SDOI2018战略游戏(圆方树+虚树)

    QWQ深受其害 当时在现场是真的绝望...... 现在再重新来看这个题 QWQ 根据题目所说,我们可以发现,对于每一个集合中的节点,我们实际上就是要求两两路径上的割点的数目 考虑到又是关于点双的题目, ...

  10. 好奇!仅 13kB 大小的游戏,源码长啥样?

    这个马赛克风格的表情正好 13Kb,有人竟然能用一个表情大小的空间,制作个游戏出来.我就不信这么点的地儿,能写出个花来?游戏能好玩吗?因为这些游戏点开就能玩,我抱着试一试的心态把玩了一会. 事实证明是 ...