菜鸟Axios学习=官网
Axios
- Axios学习
- 什么是axios?
- 安装
- GET方法
- POST
- 执行多个并发请求
- axios API
- 请求方法的别名
- 并发
- 请求配置
- 响应结构
- 配置默认值
- 拦截器
- 错误处理
- 取消
- 使用 application/x-www-form-urlencoded format
- 浏览器
- Node.js
- Semver
- Promises
- TypeScript
Axios学习
什么是axios?
Axios可以用在浏览器器和Node环境中
从浏览器中创建XMLHttpRequests
从Node.js创建http请求
拦截请求和响应
转换请求数据和响应数据
支持Promise API 提供一些并发请求接口
取消请求
自动转换JSON数据
客户端支持防御XSRF
XSRF:
CSRF一般指跨站请求伪造。跨站请求伪造(英语:Cross-site request forgery),也被称为 one-click attack 或者 session riding,通常缩写为 CSRF 或者 XSRF, 是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。
安装
使用npm
npm install axios
使用bower
bower install axios
使用yarn
yarn add axios
使用cdn
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
// 或者
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
GET方法
get请求可以在请求地址后直接拼接参数
// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345').then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});// 上面的请求也可以这样做
axios.get('/user', {params: {ID: 12345}}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});
POST
axios.post('/user', {firstName: 'Fred',lastName: 'Flintstone'}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});
执行多个并发请求
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) {// 两个请求现在都执行完成}));
axios API
可以通过向 axios 传递相关配置来创建请求
- axios(config)
// 发送 POST 请求
axios({method: 'post',url: '/user/12345',data: {firstName: 'Fred',lastName: 'Flintstone'}
});
// 获取远端图片
axios({method:'get',url:'http://bit.ly/2mTM3nY',responseType:'stream'
}).then(function(response) {response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});
axios(url[, config])
// 发送 GET 请求(默认的方法)
axios('/user/12345');
请求方法的别名
- axios.request(config)
- axios.get(url[, config])
- axios.delete(url[, config])
- axios.head(url[, config])
- axios.options(url[, config])
- axios.post(url[, data[, config]])
- axios.put(url[, data[, config]])
- axios.patch(url[, data[, config]])
注意:
在使用别名方法时, url、method、data 这些属性都不必在配置中指定。
并发
处理并发请求的助手函数
axios.all(iterable)
axios.spread(callback)
创建实例
可以使用自定义配置新建一个 axios 实例
axios.create([config])
const instance = axios.create({baseURL: 'https://some-domain.com/api/',timeout: 1000,headers: {'X-Custom-Header': 'foobar'}
});
实例方法
以下是可用的实例方法。指定的配置将与实例的配置合并。
- axios#request(config)
- axios#get(url[, config])
- axios#delete(url[, config])
- axios#head(url[, config])
- axios#options(url[, config])
- axios#post(url[, data[, config]])
- axios#put(url[, data[, config]])
- axios#patch(url[, data[, config]])
请求配置
这些是创建请求时可以用的配置选项。只有 url 是必需的。如果没有指定 method,请求将默认使用 get 方法。
{// `url` 是用于请求的服务器 URLurl: '/user',// `method` 是创建请求时使用的方法method: 'get', // default// `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。// 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URLbaseURL: 'https://some-domain.com/api/',// `transformRequest` 允许在向服务器发送前,修改请求数据// 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法// 后面数组中的函数必须返回一个字符串,或 ArrayBuffer,或 StreamtransformRequest: [function (data, headers) {// 对 data 进行任意转换处理return data;}],// `transformResponse` 在传递给 then/catch 前,允许修改响应数据transformResponse: [function (data) {// 对 data 进行任意转换处理return data;}],// `headers` 是即将被发送的自定义请求头headers: {'X-Requested-With': 'XMLHttpRequest'},// `params` 是即将与请求一起发送的 URL 参数// 必须是一个无格式对象(plain object)或 URLSearchParams 对象params: {ID: 12345},// `paramsSerializer` 是一个负责 `params` 序列化的函数// (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)paramsSerializer: function(params) {return Qs.stringify(params, {arrayFormat: 'brackets'})},// `data` 是作为请求主体被发送的数据// 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'// 在没有设置 `transformRequest` 时,必须是以下类型之一:// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams// - 浏览器专属:FormData, File, Blob// - Node 专属: Streamdata: {firstName: 'Fred'},// `timeout` 指定请求超时的毫秒数(0 表示无超时时间)// 如果请求话费了超过 `timeout` 的时间,请求将被中断timeout: 1000,// `withCredentials` 表示跨域请求时是否需要使用凭证withCredentials: false, // default// `adapter` 允许自定义处理请求,以使测试更轻松// 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)).adapter: function (config) {/* ... */},// `auth` 表示应该使用 HTTP 基础验证,并提供凭据// 这将设置一个 `Authorization` 头,覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头auth: {username: 'janedoe',password: 's00pers3cret'},// `responseType` 表示服务器响应的数据类型,可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'responseType: 'json', // default// `responseEncoding` indicates encoding to use for decoding responses// Note: Ignored for `responseType` of 'stream' or client-side requestsresponseEncoding: 'utf8', // default// `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称xsrfCookieName: 'XSRF-TOKEN', // default// `xsrfHeaderName` is the name of the http header that carries the xsrf token valuexsrfHeaderName: 'X-XSRF-TOKEN', // default// `onUploadProgress` 允许为上传处理进度事件onUploadProgress: function (progressEvent) {// Do whatever you want with the native progress event},// `onDownloadProgress` 允许为下载处理进度事件onDownloadProgress: function (progressEvent) {// 对原生进度事件的处理},// `maxContentLength` 定义允许的响应内容的最大尺寸maxContentLength: 2000,// `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`),promise 将被 resolve; 否则,promise 将被 rejectevalidateStatus: function (status) {return status >= 200 && status < 300; // default},// `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目// 如果设置为0,将不会 follow 任何重定向maxRedirects: 5, // default// `socketPath` defines a UNIX Socket to be used in node.js.// e.g. '/var/run/docker.sock' to send requests to the docker daemon.// Only either `socketPath` or `proxy` can be specified.// If both are specified, `socketPath` is used.socketPath: null, // default// `httpAgent` 和 `httpsAgent` 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理。允许像这样配置选项:// `keepAlive` 默认没有启用httpAgent: new http.Agent({ keepAlive: true }),httpsAgent: new https.Agent({ keepAlive: true }),// 'proxy' 定义代理服务器的主机名称和端口// `auth` 表示 HTTP 基础验证应当用于连接代理,并提供凭据// 这将会设置一个 `Proxy-Authorization` 头,覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。proxy: {host: '127.0.0.1',port: 9000,auth: {username: 'mikeymike',password: 'rapunz3l'}},// `cancelToken` 指定用于取消请求的 cancel token// (查看后面的 Cancellation 这节了解更多)cancelToken: new CancelToken(function (cancel) {})
}
响应结构
某个请求的响应包含以下信息
{// `data` 由服务器提供的响应data: {},// `status` 来自服务器响应的 HTTP 状态码status: 200,// `statusText` 来自服务器响应的 HTTP 状态信息statusText: 'OK',// `headers` 服务器响应的头headers: {},// `config` 是为请求提供的配置信息config: {},// 'request'// `request` is the request that generated this response// It is the last ClientRequest instance in node.js (in redirects)// and an XMLHttpRequest instance the browserrequest: {}
}
使用 then 时,你将接收下面这样的响应 :
axios.get('/user/12345').then(function(response) {console.log(response.data);console.log(response.status);console.log(response.statusText);console.log(response.headers);console.log(response.config);});
在使用 catch 时,或传递 rejection callback 作为 then 的第二个参数时,响应可以通过 error 对象可被使用,正如在错误处理这一节所讲。
配置默认值
- 全局的 axios 默认值
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
- 自定义实例默认值
// Set config defaults when creating the instance
const instance = axios.create({baseURL: 'https://api.example.com'
});// Alter defaults after instance has been created
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
- 配置的优先顺序
配置会以一个优先顺序进行合并。这个顺序是:在 lib/defaults.js 找到的库的默认值,然后是实例的 defaults 属性,最后是请求的 config 参数。后者将优先于前者。这里是一个例子:
// 使用由库提供的配置的默认值来创建实例
// 此时超时配置的默认值是 `0`
var instance = axios.create();// 覆写库的超时默认值
// 现在,在超时前,所有请求都会等待 2.5 秒
instance.defaults.timeout = 2500;// 为已知需要花费很长时间的请求覆写超时设置
instance.get('/longRequest', {timeout: 5000
});
拦截器
在请求或响应被 then 或 catch 处理前拦截它们。
// 添加请求拦截器
axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;}, function (error) {// 对请求错误做些什么return Promise.reject(error);});// 添加响应拦截器
axios.interceptors.response.use(function (response) {// 对响应数据做点什么return response;}, function (error) {// 对响应错误做点什么return Promise.reject(error);});
如果你想在稍后移除拦截器,可以这样:
const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
可以为自定义 axios 实例添加拦截器
const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});
错误处理
axios.get('/user/12345').catch(function (error) {if (error.response) {// The request was made and the server responded with a status code// that falls out of the range of 2xxconsole.log(error.response.data);console.log(error.response.status);console.log(error.response.headers);} else if (error.request) {// The request was made but no response was received// `error.request` is an instance of XMLHttpRequest in the browser and an instance of// http.ClientRequest in node.jsconsole.log(error.request);} else {// Something happened in setting up the request that triggered an Errorconsole.log('Error', error.message);}console.log(error.config);});
- 可以使用 validateStatus 配置选项定义一个自定义 HTTP 状态码的错误范围。
axios.get('/user/12345', {validateStatus: function (status) {return status < 500; // Reject only if the status code is greater than or equal to 500}
})
取消
使用 cancel token 取消请求
可以使用 CancelToken.source 工厂方法创建 cancel token,像这样:
const CancelToken = axios.CancelToken;
const source = CancelToken.source();axios.get('/user/12345', {cancelToken: source.token
}).catch(function(thrown) {if (axios.isCancel(thrown)) {console.log('Request canceled', thrown.message);} else {// 处理错误}
});axios.post('/user/12345', {name: 'new name'
}, {cancelToken: source.token
})// 取消请求(message 参数是可选的)
source.cancel('Operation canceled by the user.');
还可以通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token:
const CancelToken = axios.CancelToken;
let cancel;axios.get('/user/12345', {cancelToken: new CancelToken(function executor(c) {// executor 函数接收一个 cancel 函数作为参数cancel = c;})
});// cancel the request
cancel();
注意: 可以使用同一个 cancel token 取消多个请求
使用 application/x-www-form-urlencoded format
默认情况下,axios将JavaScript对象序列化为JSON。 要以application / x-www-form-urlencoded格式发送数据,您可以使用以下选项之一。
浏览器
- 在浏览器中,您可以使用URLSearchParams API,如下所示:
const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);
请注意,所有浏览器都不支持URLSearchParams(请参阅caniuse.com),但可以使用polyfill(确保填充全局环境)。
或者,您可以使用qs库编码数据
const qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));
或者以另一种方式(ES6)
import qs from 'qs';
const data = { 'bar': 123 };
const options = {method: 'POST',headers: { 'content-type': 'application/x-www-form-urlencoded' },data: qs.stringify(data),url,
};
axios(options);
Node.js
在node.js中,您可以使用qs库或者querystring模块,querystring模块如下所示:
const querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({ foo: 'bar' }));
Semver
在axios达到1.0版本之前,破坏性更改将以新的次要版本发布。 例如0.5.1和0.5.4将具有相同的API,但0.6.0将具有重大变化。
Promises
axios 依赖原生的 ES6 Promise 实现而被支持. 如果你的环境不支持 ES6 Promise,你可以使用 polyfill.
TypeScript
axios包括TypeScript定义。
import axios from 'axios';
axios.get('/user?ID=12345');
官网 http://www.axios-js.com/zh-cn/docs/
菜鸟Axios学习=官网相关推荐
- 新学Python之学习官网教程序言
大家好,我是 herosunly.985 院校硕士毕业,现担任算法研究员一职,热衷于机器学习算法研究与应用.曾获得阿里云天池安全恶意程序检测第一名,科大讯飞恶意软件分类挑战赛第三名,CCF 恶意软 ...
- 新手学Python之学习官网教程(五: Data Structures)
文章目录 1. 前言 2. 数据结构 2.1. 列表 2.1.1 将列表作为栈进行使用 2.1.2 将列表作为队列进行使用 2.1.3 列表生成式 2.1.4 嵌套的列表生成式 2.2 del语句 2 ...
- 新手学Python之学习官网教程(六: Modules)
文章目录 1. 前言 2. 模块 2.1 更多有关模块的内容 2.1.1 以脚本的方式执行模块 2.1.2 模块搜索路径 2.1.3 被编译的Python文件 2.2 标准模块 2.3. dir() ...
- 新手学Python之学习官网教程(十三: What Now)
文章目录 1. 前言 2. 其他参考资料 3. 其他常用库补充 3.0 求文件的md5 3.1 组合 3.2 判断当前Python环境为2还是3 3.3 random 3.4 将十六进制字符串转换成二 ...
- 新手学Python之学习官网教程(一: Whetting Your Appetite)
文章目录 0. 主要内容 1. 编译型语言 vs 解释型语言 2. Python简单易用 3. Python作为胶水语言 0. 主要内容 本节课对应的官网链接为https://docs.pytho ...
- 新手学Python之学习官网教程(二: Using the Python Interpreter)
文章目录 0. 前言 1. Python安装方法 1.1 核心概念之环境变量 2. 使用Python解释器 2.1 调用Python解释器 2.1.1 参数传入 2.1.2 交互模式 2.2 解释器及 ...
- keras 等深度学习官网文档 API
https://keras.io/ https://www.tensorflow.org/ http://caffe.berkeleyvision.org/ http://deeplearning.n ...
- python学习官网-Python学习(一)—— 初识python
Cpython Python的官方版本,使用C语言实现,使用最为广泛,CPython实现会将源文件(py文件)转换成字节码文件(pyc文件),然后运行在Python虚拟机上. Jyhton Pytho ...
- Kubernetes四探(官网Tutorials的学习)
2022年10月2日: 国庆是充电的好机会.继续学习官网的Tutorials. 先推荐一个学习kubernetes 的好去处. https://labs.play-with-k8s.com 就是有点慢 ...
最新文章
- 何时使用JavaFX代替HTML
- VMware 8.0不能手动安装Linux5.5(命令行)问题解决方法
- 2018年阿里巴巴关于java重要开源项目汇总
- HP 8440P 4G内存蓝屏--内存颗粒容量支持问题
- Re27:读论文 LADAN Distinguish Confusing Law Articles for Legal Judgment Prediction
- kubernetes如何解决服务依赖呢?
- windows10 访问网页的时候提示找不到服务器IP地址如何处理
- CVPR2022目标检测文章汇总+创新点简要分析
- Web3≠NFT?一场数字文艺复兴之路?
- 《机器学习实战》学习笔记第十一章 —— Apriori算法
- 仅仅有人物没背景的图片怎么弄_只会画人物不会画背景?这3种方法教你快速画背景!...
- 矩阵实验:图形图像处理
- Spring系列:字节跳动+腾讯+华为+小米+阿里面试题分享
- Proxifier 代理方式上网
- 智能高低配电柜无线联网解决方案
- Vue 实现世界地图展示,根据国家中数量的多少区分(类似世界疫情地图)
- 突破游戏驱动级反外挂保护
- 摩尔定律失效后的芯片该怎么发展?
- 鱼骨图技能详解+13张精选模板,让你3分钟快速掌握鱼骨图分析法!
- WebGL自学课程(6):WebGL加载跨域纹理出错Uncaught Error: SECURITY_ERR: DOM Exception 18
热门文章
- 玩客云刷入armbian系统总结
- 设计一个算法,借助栈实现单链表链接顺序的逆转
- QTreeWidget实现搜索子节点功能
- sencha list
- Flutter获取焦点
- OS学习笔记-8(清华大学慕课)虚拟存储管理
- mybatis中count(*)与count (*)的区别
- 原装苹果手机_苹果手机换个屏水这么深!嘉兴警方揭开“原装屏”真相
- windows 7下安装软件时窗口显示不全的问题
- 符合python语言变量命名规则_符的解释|符的意思|汉典“符”字的基本解释