axios学习笔记
axios学习笔记
axios文档源地址:https://github.com/axios/axios
0.概念
axios 在NPM上的描述是:Promise based HTTP client for the browser and node.js。
axios是通过promise实现对ajax技术的一种封装,就像jQuery实现ajax封装一样。
简单来说: ajax技术实现了网页的局部数据刷新,axios实现了对ajax的封装。
1.Installing
$ npm install axios
2.Example
1.Performing a GET request
// Make a request for a user with a given ID
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// Optionally the request above could also be done as
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 异步操作 Want to use async/await? Add the `async` keyword to your outer function/method.
async function getUser() {
try {
const response = await axios.get('/user?ID=12345');
console.log(response);
} catch (error) {
console.error(error);
}
}
NOTE: async/await is part of ECMAScript 2017 and is not supported in Internet Explorer and older browsers, so use with caution.
2.Performing a POST request
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
3.多种并发请求
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// Both requests are now complete
}));
3.axios API(和ajax很像)
1.post
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
2.get
axios({
method:'get',
url:'http://bit.ly/2mTM3nY',
responseType:'stream'
})
.then(function(response) {
response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});
3.默认get方法
axios('/user/12345');
4.requireJs
4.1作用
防止JS阻塞浏览器渲染
4.2使用
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.16/require.min.js"></script>
axios学习笔记的更多相关文章
- axios 学习笔记
官方文档地址:https://github.com/axios/axios axios 是一个基于 Promise 的HTTP库,可以用在浏览器和 node.js 中 特性: • 从浏览器发起 XML ...
- SpringMVC:学习笔记(8)——文件上传
SpringMVC--文件上传 说明: 文件上传的途径 文件上传主要有两种方式: 1.使用Apache Commons FileUpload元件. 2.利用Servlet3.0及其更高版本的内置支持. ...
- Django:学习笔记(8)——文件上传
Django:学习笔记(8)——文件上传 文件上传前端处理 本模块使用到的前端Ajax库为Axio,其地址为GitHub官网. 关于文件上传 上传文件就是把客户端的文件发送给服务器端. 在常见情况(不 ...
- iView学习笔记(三):表格搜索,过滤及隐藏列操作
iView学习笔记(三):表格搜索,过滤及隐藏某列操作 1.后端准备工作 环境说明 python版本:3.6.6 Django版本:1.11.8 数据库:MariaDB 5.5.60 新建Django ...
- Vue学习笔记十三:Vue+Bootstrap+vue-resource从接口获取数据库数据
目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...
- 两万字Vue.js基础学习笔记
Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...
- EL-ADMIN学习笔记
一,支持接口限流,避免恶意请求导致服务层压力过大 常见的限流功能一般有两个关注点: 1.限流原则,即以什么样的条件对请求进行识别以及放行.常见的作法是给予每个调用API的系统不同的唯一编码,用于监控某 ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
随机推荐
- Android Studio 停靠模式(Docked Mode)
如果之前选了任务一种模式,先全都取消了 然后点击Window -->Active Tool Window-->这个时候就可以选择Docked Mode了
- Qt QRect与QRectF的区别
一直在与QRect和QRectF打交道.甚至在使用过程中因为QRect而出现了致命的Bug.因为QRect在数据存储表示上有一个很大的“历史遗留问题”! QRect Class 也就是说,对于QR ...
- Python 安装zbar-py时出现 无法打开包括文件: “unistd.h” no such file or directory
问题 途中使用的命令是cl.exe,在执行命令的时候找不到对应的unistd.h文件. unistd.h是Unix系统的文件,因此,十有八九,使用的是Windows系统.下面的代码可以修复,但是如果修 ...
- Spring核心实现篇
一.Spring Framework的核心:IoC容器的实现 1.1Spring IoC的容器概述 1.1.1 IoC容器和控制反转模式 依赖控制反转的实现有很多种方式.在Spring中,IOC容器是 ...
- JS 判断移动端与PC端
js判断移动端与pc端 这里介绍下使用device.js插件来判断移动端设备 地址:https://github.com/matthewhudson/device.js 示例: 1 2 3 4 5 ...
- 几个Java基础题
1.java中线程能不能重复start t1.start(); System.out.println("ssss"); t1.start(); 答:第一 ...
- 获取IP和IP地址
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>; <script type= ...
- zabbix3.4--配置微信告警
1.注册企业微信 https://work.weixin.qq.com/ 2.注册好后登陆,点击“我的企业”,记录企业ID. 3.点击“应用管理”--“创建应用”,创建应用时添加接收告警的用户 4.添 ...
- opencv处理图像
import cv2 import numpy import os img = numpy.zeros((3, 3), dtype=numpy.uint8) print(img) img = cv2. ...
- android简洁饼状图组件、圆形Menu菜单、画板画笔应用、答题应用等源码
Android精选源码 android自动监听复制内容源码 Android上简洁轻量级的饼图控件 好看的 Android 圆形 Menu 菜单效果 android画笔.画板功能效果的实现 Androi ...