axios 中文文档、使用说明

以下内容全文转自 Axios 文档:https://www.kancloud.cn/yunye/axios/234845

##Axios

npm version
build status
code coverage
npm downloads
gitter chat

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

Features

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF

浏览器支持

ChromeFirefoxSafariOperaEdgeIE
Latest ✔Latest ✔Latest ✔Latest ✔Latest ✔8+ ✔

 

安装

使用 npm:

$ npm install axios

使用 bower:

$ bower install axios

使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Example

执行 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(url[, config])

// 发送 GET 请求(默认的方法)
axios('/user/12345');

请求方法的别名

为方便起见,为所有支持的请求方法提供了别名

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

NOTE

在使用别名方法时, urlmethoddata 这些属性都不必在配置中指定。

并发

处理并发请求的助手函数

axios.all(iterable)

axios.spread(callback)

创建实例

可以使用自定义配置新建一个 axios 实例

axios.create([config])

var 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#post(url[, data[, config]])

axios#put(url[, data[, config]])

axios#patch(url[, data[, config]])

请求配置

这些是创建请求时可以用的配置选项。只有 url 是必需的。如果没有指定 method,请求将默认使用 get 方法。

{// `url` 是用于请求的服务器 URLurl: '/user',// `method` 是创建请求时使用的方法method: 'get', // 默认是 get// `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。// 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URLbaseURL: 'https://some-domain.com/api/',// `transformRequest` 允许在向服务器发送前,修改请求数据// 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法// 后面数组中的函数必须返回一个字符串,或 ArrayBuffer,或 StreamtransformRequest: [function (data) {// 对 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, // 默认的// `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', // 默认的// `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称xsrfCookieName: 'XSRF-TOKEN', // default// `xsrfHeaderName` 是承载 xsrf token 的值的 HTTP 头的名称xsrfHeaderName: 'X-XSRF-TOKEN', // 默认的// `onUploadProgress` 允许为上传处理进度事件onUploadProgress: function (progressEvent) {// 对原生进度事件的处理},// `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; // 默认的},// `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目// 如果设置为0,将不会 follow 任何重定向maxRedirects: 5, // 默认的// `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: {}
}

使用 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 对象可被使用,正如在错误处理这一节所讲。

配置的默认值/defaults

你可以指定将被用在各个请求的配置默认值

全局的 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';

自定义实例默认值

// 创建实例时设置配置的默认值
var instance = axios.create({baseURL: 'https://api.example.com'
});// 在实例已创建后修改默认值
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);});

如果你想在稍后移除拦截器,可以这样:

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

可以为自定义 axios 实例添加拦截器

var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

错误处理

axios.get('/user/12345').catch(function (error) {if (error.response) {// 请求已发出,但服务器响应的状态码不在 2xx 范围内console.log(error.response.data);console.log(error.response.status);console.log(error.response.headers);} 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; // 状态码在大于或等于500时才会 reject}
})

取消

使用 cancel token 取消请求

Axios 的 cancel token API 基于cancelable promises proposal,它还处于第一阶段。

可以使用 CancelToken.source 工厂方法创建 cancel token,像这样:

var CancelToken = axios.CancelToken;
var source = CancelToken.source();axios.get('/user/12345', {cancelToken: source.token
}).catch(function(thrown) {if (axios.isCancel(thrown)) {console.log('Request canceled', thrown.message);} else {// 处理错误}
});// 取消请求(message 参数是可选的)
source.cancel('Operation canceled by the user.');

还可以通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token:

var CancelToken = axios.CancelToken;
var cancel;axios.get('/user/12345', {cancelToken: new CancelToken(function executor(c) {// executor 函数接收一个 cancel 函数作为参数cancel = c;})
});// 取消请求
cancel();

Note : 可以使用同一个 cancel token 取消多个请求

Semver

Until axios reaches a 1.0 release, breaking changes will be released with a new minor version. For example 0.5.1, and 0.5.4will have the same API, but 0.6.0 will have breaking changes.

Promises

axios 依赖原生的 ES6 Promise 实现而被支持.
如果你的环境不支持 ES6 Promise,你可以使用 polyfill.

TypeScript

axios includes TypeScript definitions.

import axios from 'axios';
axios.get('/user?ID=12345');

Resources

  • Changelog
  • Upgrade Guide
  • Ecosystem
  • Contributing Guide
  • Code of Conduct

Credits

axios is heavily inspired by the $http service provided in Angular. Ultimately axios is an effort to provide a standalone $http-like service for use outside of Angular.

License

MIT

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/448258.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

汽车熄火是什么原因?

汽车熄火是什么原因&#xff1f; 近来看见很多车主被车子熄火所困扰&#xff0c;驾校一点通帮助您从以下也许可以找出原因。 1、自动档车型&#xff1a; 自动档的车型不会轻易出现熄火的现象&#xff0c;而手动档的车型由于驾驶水平不高&#xff0c;可能会经常出现熄火的现象。…

数据库 -- 02

引擎介绍 1.什么是引擎 MySQL中的数据用各种不同的技术存储在文件&#xff08;或者内存&#xff09;中。这些技术中的每一种技术都使用不同的存储机制、索引技巧、锁定水平并且最终提供广泛的不同的功能和能力。通过选择不同的技术&…

事件EVENT,WaitForSingleObject(),WaitForMultipleObjecct()和SignalObjectAndWait() 的使用(下)

注意&#xff1a;当WaitForMultipleObjects等待多个内核对象的时候&#xff0c;如果它的bWaitAll 参数设置为false。其返回值减去WAIT_OBJECT_0 就是参数lpHandles数组的序号。如果同时有多个内核对象被触发&#xff0c;这个函数返回的只是其中序号最小的那个。 如果bWaitAll …

设置 shell 脚本中 echo 显示内容带颜色

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 shell脚本中echo显示内容带颜色显示,echo显示带颜色&#xff0c;需要使用参数 -e 格式如下&#xff1a; echo -e "\033[字背景颜…

Visual C++ 编译器选项 /MD、/ML、/MT、/LD

前段时间编译一个引用自己写的静态库的程序时老是出现链接时的多个重定义的错误&#xff0c;而自己的代码明明没有重定义这些东西&#xff0c;譬如&#xff1a; LIBCMT.lib(_file.obj) : error LNK2005: ___initstdio already defined in libc.lib(_file.obj) LIBCMT.lib(_fi…

Delphi面向对象编程的20条规则

Delphi面向对象编程的20条规则 作者简介 Marco Cantu是一个知名的Delphi专家&#xff0c;他曾出版过《精通Delphi》系列丛书&#xff0c;《Delphi开发手册》以及电子书《精通Pascal》(该电子书可在网上免费获得)。他讲授的课题是Delphi基础和高级开发技巧。你可以通过他…

制动失灵怎么办?

定义 制动过程中&#xff0c;由于制动器某些零部件的损坏或发生故障&#xff0c;使运动部件(或运动机械)不能保持停止状态或不能按要求停止运动的现象。 制动失灵的原因 制动失灵的关键在于制动系统无法对汽车施加足够的制动力&#xff0c;包括制动液管路液位不足或进入空气、制…

OpenDDS用idl生成自定义数据类型时遇到的一个问题

问题&#xff1a;这里会提示LNK2005重复定义的错误 解决方案&#xff1a; 解决后&#xff1a;

解决:Connect to xx.xx.xxx.xx :8081 [/xx.xx.xx.xx] failed: Connection refu sed: connect -> [H

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. 自行启动了个 Nenux 服务。想把本地工程推送到 个人私服&#xff0c;执行命令&#xff1a;mvn deploy 报错&#xff1a; Failed to…

ADOQuery 查询 删除 修改 插入

//利用combobox组件查询数据库表procedure TForm1.Button1Click(Sender: TObject);beginADOQuery1.Close;ADOQuery1.SQL.Clear;ADOQuery1.SQL.Add(select * from trim(ComboBox2.Text));ADOQuery1.Active:true;end&#xff1b; //查询记录procedure TForm1.Button1Click(Sender…

防爆胎,有妙招

对于大多数人来说&#xff0c;买车难,养车更难。许多人拥有了新车&#xff0c;却没有足够的知识去好好保养汽车&#xff0c;这实在是非常可惜。如何做好汽车的保养工作,让我们的爱车更好的为我们工作&#xff1f;夏天炽热的天气&#xff0c;是否让你为爆胎烦恼不已&#xff1f;…

Qt之QProcess(一)运行cmd命令

Qt提供了QProcess类&#xff0c;QProcess可用于完毕启动外部程序&#xff0c;并与之交互通信。 一、启动外部程序的两种方式&#xff1a; &#xff08;1&#xff09;一体式&#xff1a;void QProcess::start(const QString & program, const QStringList & arguments…

Docker 方式安装 Nexus 私服

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. 从Docker 官方仓库查找镜像&#xff1a; docker search nexus 2. 拉取镜像&#xff1a; docker pull 你选中的镜像的名字  pull…

shader飞线改进版

项目github地址&#xff1a;https://github.com/ecojust/flyline 前面写过一个飞线(基于THREE.Line进行的颜色变化)&#xff0c;只是简单地将可视区片元颜色的alpha通道值设为1.0&#xff0c;不在可视区的设为0.0。效果是这样的&#xff1a; 做得很粗糙&#xff0c;而且因为线是…

转向盘失控怎么办?

定义 转向失控就是方向盘不管用了&#xff0c;打方向盘&#xff0c;但是前轮不动&#xff0c;不受方向盘控制。 转向失控的原因 转向失控可能因为车辆过快、酒驾、疲劳、车况不佳、雨雪路滑等&#xff0c;还有转向机构中有零部件脱落、损坏、卡滞时&#xff0c;也会使转向机构突…

Socket网络编程【获取本机IP】

//12.3.2//运行环境VS2013//获取本地IP #include <stdio.h> #include <winsock2.h> #pragma comment(lib,"ws2_32.lib")void main() { // 调用WSAStarup初始化WINsock库 WSADATA wsaData; ::WSAStartup( MAKEWORD(2,2), &wsaData);// 存放主机名的…

onresize

1 window.onresize function (ev) { 2 console.log(尺寸发生改变&#xff01;); 3 }; 4 5 window.addEventListener(resize, function (ev) { 6 console.log(尺寸发生改变&#xff01;); 7 }); 1 /*2 当屏幕的宽度>960时&#xff0c;页面的背景颜色为红色…

Vuejs:组件 slot 内容分发

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 本文是在官方文档的基础上&#xff0c;更加细致的说明&#xff0c;代码更多更全。 简单来说&#xff0c;更适合新手阅读 &#xff08;…

C++获取本机所有ip地址,可区分类型是有线无线虚拟机还是回环

一个小程序&#xff0c;可以获取本地所有ip地址&#xff0c;包括有线&#xff0c;无线&#xff0c;虚拟机&#xff0c;环回接口网卡&#xff0c;等。 如图&#xff0c;一台机器多个网卡&#xff1a; 程序执行结果&#xff1a; #include"stdio.h" #include"…

顿悟人生十一句话

一、永远不要埋怨你已经发生的事情 如果你打算忍受一件事情就闭上嘴巴吧。要么就改变它&#xff0c;要么就安静的接受它。 二、最让你忿忿不平的问题&#xff0c;就是你需要解决的问题 一个被酒后驾驶的司机撞死自己儿子的妇女&#xff0c;发起了反对酒后驾驶母亲协会…