axios学习教程攻略

序

随着vuejs作者尤雨溪宣布停止维护vue-resource并推荐大家使用axios，axios被越来越多的人所熟知。本来想在网上找找详细的策略，突然发现axios的官方文档很详细！如果你有这个，你需要什么样的自行车！所以建议学习这类图书馆，最好详细阅读其官方文献。我大致翻译过axios的官方文档，我相信如果你在练习之前彻底理解这篇文章，axios就什么都不是了。

如果你觉得这篇文章对你有帮助，不妨点赞或者注意收藏。你的鼓励对我很重要。

axios简介

Axios是基于Promise的浏览器和nodejs的HTTP客户端，具有以下特点：

从浏览器创建XMLHttpRequest从节点发送http请求. js支持Promise API拦截请求和响应转换请求和响应数据取消请求自动转换JSON数据客户端支持防止CSRF/XSRF浏览器兼容

介绍方法：

$ npminstallaxios $ cnpminstallaxios//淘宝来源$ bower安装axios或使用cdn:

剧本src=' http:https://unpkg.com/axios/dist/axios.min.js'/script举个栗子：

执行GET请求

//发送请求axios.get('/user？ID=12345’)。然后(函数(响应){ console.log(响应)；}) .catch(函数)(错误){ console.log(错误)；});//还可以传递参数axios.get ('/user '，{ params: { id3360 12345 } })。然后(函数(响应){console.log(响应)；}) .catch(函数)(错误){ console.log(错误)；});执行开机自检请求

axios.post('/user '，{ firstName: 'Fred '，lastName: ' Flintstone ' })。然后(函数(响应){ console.log(响应)；}) .catch(函数)(错误){ console.log(错误)；});执行多个并发请求

函数getuser account(){ return axios . get('/user/12345 ')；}函数getuser permissions(){ return axios . get('/user/12345/permissions ')；} axios。all ([getuseraccount()、getuserpermissions ()])。然后(axios。spread(函数(acct，权限){//现在完成两个请求})；axios应用编程接口

可以通过将相关配置传递给axios来发出请求。

axios(配置)

//发送POST请求axios({方法：' post '，URL : '/用户/12345 '，数据： {名字3360' Fred '，姓氏3360 ' flintestone ' })；Axios(url[，config])//发送GET请求(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]】)注意

使用别名方法时，不需要在配置中指定url、方法和数据属性。

因…而变得复杂

帮助功能处理并发请求。

Axios.all(可重复)axios.spread(回调)创建一个实例

您可以使用自定义配置创建axios的新实例。

axios . create([config])var instance=axios . create({ base URL : ' https://some-domain.com/API/'，timeout: 1000，Header RS : { ' 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。如果没有指定方法，请求将默认为GET。

{//`url '是要用于请求的服务器url，url:'/user '，//` method '是请求方法，method:' get '，除非` url '是绝对的，否则//default //`baseurl '将添加在` url '之前。//可以很容易地为axios的一个实例设置‘baseURL’，从而将相对URL传递给实例的方法。“basearl :”https://some-domain.com/API/',//`transformrequest'允许在将请求的数据发送到服务器之前对其进行更改//这仅适用于请求方法“PUT”、“POST”和“PATCH”//数组中的最后一个函数必须返回一个字符串。ArrayBuffer或stream transform request :[函数(数据){//执行任何所需的数据转换以返回数据；}]，//`transformresponse '允许在然后/catch之前更改响应数据。transform response :[function(data){//做任何你想做的事情来转换数据返回数据；}]，//`headers '是要发送的自定义标头： { ' x-request-with ' : ' xmlhttprequest ' }。//`params '是与请求一起发送的URL参数。//它必须是纯对象或URLSearchParams对象params: {id3360 12345}。//`params serializer '是可选函数。序列化` params `//(例如https://www.npmjs.com/package/qs,http://api.jquery.com/jquery.param/)paramsserializer 3360函数(params){ return QS . stringify(params，{arrayFormat: '括号' }) }，/`data '是作为请求正文发送的数据//仅适用于请求方法“PUT”、“POST”和“patch”//当未设置transformRequest '时，它必须是以下类型之一：//-string、普通对象、arraybuffer、ArrayBufferView、ursearched//如果请求的时间超过“超时”，请求将被中止。Timeout: 1000，//` with credentials '表示是否跨站点访问控制请求//应该使用带有credentials : false的凭据进行，//default//`adapter '允许对请求进行自定义处理，这使得测试更加容易。//返回承诺并提供有效响应(参考【响应文档】(# response-API))适配器：函数(config) {/*.*/}，//`auth '表示应该使用HTTP基本身份验证并提供凭据。//这将设置一个“授权”头，覆盖任何现有的“授权”自定义头，并使用“头”设置。auth : { username : ' Jane doe '，password :' s 00pers3cret'}，/“响应类型”表示服务器将响应的数据类型//包括“数组缓冲区”、“blob”、“文档”、“JSON”、“Text”、“stream”响应类型：“JSON”，//default/` xsrfcookiename `是要用作xsrf令牌xsrfcookiename 3360' xsrf-token '值的cookie的名称。//default ///default//` onuploaddprogress `允许处理上传的进度事件onuploadprogress :函数(进度事件){//使用本地进度事件做任何您想做的事情}。//`onDownloadProgress `允许在ondownloadprogress :函数(进度事件)上处理下载进度事件{//对本机进度事件做任何您想做的事情}。//`maxContentLength `定义http响应内容maxcontentlength : 2000的最大允许大小，/`validatestatus `定义是解析还是拒绝给定的承诺//HTTP响应状态代码。如果“有效状态”返回真(或设置为“空”)，则承诺将被解决；否则，承诺将被//拒绝。validateStatus:函数(状态){返回状态=200状态300；//default}，//` maxredirections `定义在node . js//中要遵循的最大重定向数。如果设置为0，将不会遵循重定向。MaxRedirects: 5，//default //`httpAgent '和` https agent '用于定义在node.js中执行http和https请求时使用的自定义代理.//允许配置“保持活动”等选项。//默认不启用。

http page nt :新的http .代理({ keepAlive: true })，httpsAgent:新https .代理({ keepAlive: true })，//”代理"定义代理服务器的主机名和端口//`auth `表示基本身份验证应该用于连接到代理，并提供全权证书。//这将设置一个"代理-授权"标题，覆盖任何使用`标题` s设置的现有的"代理-授权"自定义标题. proxy: { host: '127.0.0.1 '，port: 9000，auth : { username : ' mikeymike '，password: 'rapunz3l' }，//"cancelToken "指定可用于取消请求的取消令牌//(有关详细信息，请参见下面的取消部分)cancelToken:新的cancelToken(函数（取消){ })使用然后时，您将收到如下响应：

axios.get('/user/12345 ')。然后(function(response){ console . log(response . data)；console . log(response . status)；console . log(response . statustext)；console . log(response . headers)；console . log(response . config)；});配置默认值

您可以指定将应用于每个请求的配置默认值。

全局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-URL encoded '；自定义实例默认值

//创建实例时设置配置默认值varinstance=axios . create({ base URL:' 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 . time out=2500；//覆盖此请求的超时，因为它知道这将花费很长时间instance.get('/longRequest '，{ time out:5000 })；中间体

您可以在由then或catch处理之前拦截请求或响应

//添加请求拦截器axios . interceptors . request . use(function(config){//在发送请求返回config之前做一些事情；}，函数(错误){ //请求错误时做点什么。返回Promise.reject(错误)；});//添加响应拦截器axios . interceptors . response . use(function(response)){//对响应数据做点什么返回响应；}，函数(错误){ //请求错误时做点什么。返回Promise.reject(错误)；});如果以后需要删除拦截器。

var myInterceptor=axios . interceptors . request . use(function(){/*.*/});axios . interceptors . request . eject(my interceptor)；您可以将拦截器添加到axios的自定义实例中。var instance=axios . create()；instance . interceptors . request . use(function(){/*.*/});处理错误

Axios。get ('/user/12345 ')。catch(函数(错误){if(错误。response){//请求已发送，但服务器以状态代码//进行响应，这不在2xx console.log的范围内(错误。response . data)；console . log(error . response . status)；console . log(error . response . headers)；}设置触发错误的请求时，出现了else {//error console.log('Error '，Error . message)；} } console . log(error . config)；});您可以使用“有效状态”配置选项定义自定义的HTTP状态代码错误范围。

axios.get('/user/12345 '，{ validate status:function(status){ return status 500；//仅当状态代码大于或等于500时拒绝)}}消除

您可以使用取消令牌取消请求。

Axios取消令牌API基于可取消的承诺提案，目前处于第1阶段。

您可以使用CancelToken.source工厂创建取消令牌，如下所示：

var CancelToken=axios。CancelTokenvar source=canceltoken . source()；axios.get('/user/12345 '，{ canceltoken n : source . token })。catch(函数(已抛出){ if (axios.isCancel(已抛出)){ console . log(' Request cancel '，已抛出. message)；} else {//错误处理} })；//取消请求(消息参数可选)source.cancel('操作被用户取消。);您也可以通过将执行器函数传递给canceltoken构造函数来创建CancelToken:

var CancelToken=axios。CancelTokenvar取消；Axios.get('/user/12345 '，{canceltoken: new canceltoken(函数执行器(c){//一个执行器函数接收一个取消函数作为参数cancel=c；})});//取消请求清除()；注意：您可以用同一个取消令牌取消多个请求。

使用应用程序/x-www-form-urlencoded格式

默认情况下，Axios将JavaScript对象序列化为JSON。要以application/x-www-form-URL encoded格式发送数据，可以使用以下选项之一。

浏览器

在浏览器中，您可以使用如下网址搜索参数应用编程接口：

var params=new URLSearchParams()；params.append('param1 '，' value 1 ')；params.append('param2 '，' value 2 ')；axios.post('/foo '，params)；请注意，所有浏览器都不支持URLSearchParams，但是有一个polyfill可用(确保polyfill全局环境)。

或者，您可以使用qs库对数据进行编码：

var QS=require(' QS ')；axios.post('/foo '，QS . stringify({ ' bar ' : 123 })；Node.js

在node.js中，可以使用querystring模块，如下所示：

var query string=require(' query string ')；axios . post(' http://something.com/'，query string . stringify({ foo : ' bar ' })；你也可以使用qs库。

承诺

Axios依靠自己的机器来支持ES6 Promise的实现。如果您的环境不支持ES6 Promises，您可以使用polyfill。

以打字打的文件

Axios包括TypeScript定义。

从“axios”导入axios；axios.get('/user？ID=12345’)；Axios受到Angular提供的$http服务的极大启发。最后，axios努力提供一个独立的类似$http的服务，在Angular之外使用。

摘要

以上就是本文的全部内容。希望本文的内容能给你的学习或工作带来一些帮助。有问题可以留言交流。谢谢你的支持。