axios基础
来源:互联网 发布:易编程模块 编辑:程序博客网 时间:2024/06/05 09:46
axios
基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用
功能特性
- 在浏览器中发送 XMLHttpRequests 请求
- 在 node.js 中发送 http请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 自动转换 JSON 数据
- 客户端支持保护安全免受 XSRF 攻击
- 取消请求
引入方式
利用npm安装 $ npm install axios$ cnpm install axios /*taobao源*/利用bower安装$ bower install axiosVUE引入import axios from 'axios';直接利用cdn引入<script src="https:/*unpkg.com/axios/dist/axios.min.js"></script>
举个栗子
执行 GET 请求
/* 向具有指定ID的用户发出请求 */axios.get('/user?ID=12345') .then(function(response){ console.log(response); }) .catch(function(error){ console.log(error); });/* 也可以通过 params 对象传递参数*/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); });
执行多个并发请求
functiongetUserAccount(){ return axios.get('/user/12345');}functiongetUserPermissions(){ 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 请求 (GET请求是默认请求模式)
axios(‘/user/zero’);
axios提供了一下几种请求方式
为了方便起见,已经为所有支持的请求方法提供了别名。
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]])
注意
当使用别名方法时,不需要在config中指定url,method和data属性。
并发
帮助函数处理并发请求。
- 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是必需的。 如果未指定方法,请求将默认为GET。
这里的config是对一些基本信息的配置,比如请求头,baseURL,当然这里提供了一些比较方便配置项
//configimport Qs from 'qs'{ //请求的接口,在请求的时候,如axios.get(url,config);这里的url会覆盖掉config中的url url: '/user', // 请求方法同上 method: 'get', // default // 基础url前缀 baseURL: 'https://some-domain.com/api/', transformRequest: [function (data) { // 这里可以在发送请求之前对请求数据做处理,比如form-data格式化等,这里可以使用开头引入的Qs(这个模块在安装axios的时候就已经安装了,不需要另外安装) data = Qs.stringify({}); return data; }], transformResponse: [function (data) { // 这里提前处理返回的数据 return data; }], // 请求头信息 headers: {'X-Requested-With': 'XMLHttpRequest'}, //parameter参数 params: { ID: 12345 }, //post参数,使用axios.post(url,{},config);如果没有额外的也必须要用一个空对象,否则会报错 data: { firstName: 'Fred' }, //设置超时时间 timeout: 1000, //返回数据类型 responseType: 'json', // default}
有了配置文件,我们就可以减少很多额外的处理代码也更优美,直接使用
axios.post(url,{},config) .then(function(res){ console.log(res); }) .catch(function(err){ console.log(err); })//axios请求返回的也是一个promise,跟踪错误只需要在最后加一个catch就可以了。//下面是关于同时发起多个请求时的处理axios.all([get1(), get2()]) .then(axios.spread(function (res1, res2) { // 只有两个请求都完成才会成功,否则会被catch捕获 }));
最后还是说一下配置项,上面讲的是额外配置,如果你不想另外写也可以直接配置全局
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'});
阅读全文
0 0
- axios基础
- vue基础之axios
- Axios
- axios
- axios
- axios
- Axios
- axios
- axios
- axios
- axios
- axios
- axios
- axios
- Vue axios设置访问基础路径
- Vue axios设置访问基础路径
- Vue学习基础之vue-resource和vue axios
- 关于axios
- Codeforces-An impassioned circulation of affection (尺取法)
- printf函数
- js位置存放
- 解决 IIS 安装了.net framework 4.0/4.5 却找不到相应应用程序池
- [YTU]_2638(编程题:多态--动物叫)
- axios基础
- 数组中的冷知识
- JAVA之变量,进制和编码的解说
- vue1.0与2.0区别之生命周期
- php 文件处理函数总
- 使用IDEA编译scala源码
- Android6.0中ART执行类方法的过程分析二
- Together项目IOS平台开发09
- AutoCompleteTextView MultiAutoCompleteTextView Spinner