axios在vue中的简单配置与使用
一、安装
1、 利用npm安装npm install axios --save
2、 利用bower安装bower install axios --save
3、 直接利用cdn引入<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
二、例子
1、 发送一个GET
请求
//通过给定的ID来发送请求
axios.get('/user?ID=12345').then(function(response){console.log(response);}).catch(function(err){console.log(err);});
//以上请求也可以通过这种方式来发送
axios.get('/user',{params:{ID:12345}
})
.then(function(response){console.log(response);
})
.catch(function(err){console.log(err);
});
2、 发送一个POST
请求
axios.post('/user',{firstName:'Fred',lastName:'Flintstone'
})
.then(function(res){console.log(res);
})
.catch(function(err){console.log(err);
});
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){//当这两个请求都完成的时候会触发这个函数,两个参数分别代表返回的结果}))
三、axios的API
(一) axios可以通过配置(config
)来发送请求
1、 axios(config)
//发送一个`POST`请求
axios({method:"POST",url:'/user/12345',data:{firstName:"Fred",lastName:"Flintstone"}
});
2、 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]])
- 注意:当我们在使用别名方法的时候,
url,method,data
这几个参数不需要在配置中声明
(三)、 并发请求(concurrency),即是帮助处理并发请求的辅助函数
//iterable是一个可以迭代的参数如数组等
axios.all(iterable)
//callback要等到所有请求都完成才会执行
axios.spread(callback)
(四)、创建一个axios
实例,并且可以自定义其配置
1、 axios.create([config])
var instance = axios.create({baseURL:"https://some-domain.com/api/",timeout:1000,headers: {'X-Custom-Header':'foobar'}
});
2、 实例的方法
- 一下是实例方法,注意已经定义的配置将和利用create创建的实例的配置合并
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]])
四、请求的配置(request config)
- 以下就是请求的配置选项,只有
url
选项是必须的,如果method
选项未定义,那么它默认是以GET
的方式发出请求
{//`url`是请求的服务器地址url:'/user',//`method`是请求资源的方式method:'get'//default//如果`url`不是绝对地址,那么`baseURL`将会加到`url`的前面//当`url`是相对地址的时候,设置`baseURL`会非常的方便baseURL:'https://some-domain.com/api/',//`transformRequest`选项允许我们在请求发送到服务器之前对请求的数据做出一些改动//该选项只适用于以下请求方式:`put/post/patch`//数组里面的最后一个函数必须返回一个字符串、-一个`ArrayBuffer`或者`Stream`transformRequest:[function(data){//在这里根据自己的需求改变数据return data;}],//`transformResponse`选项允许我们在数据传送到`then/catch`方法之前对数据进行改动transformResponse:[function(data){//在这里根据自己的需求改变数据return data;}],//`headers`选项是需要被发送的自定义请求头信息headers: {'X-Requested-With':'XMLHttpRequest'},//`params`选项是要随请求一起发送的请求参数----一般链接在URL后面//他的类型必须是一个纯对象或者是URLSearchParams对象params: {ID:12345},//`paramsSerializer`是一个可选的函数,起作用是让参数(params)序列化//例如(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`选项时dada必须是以下几种类型之一//string/plain/object/ArrayBuffer/ArrayBufferView/URLSearchParams//仅仅浏览器:FormData/File/Bold//仅node:Streamdata {firstName:"Fred"},//`timeout`选项定义了请求发出的延迟毫秒数//如果请求花费的时间超过延迟的时间,那么请求会被终止timeout:1000,//`withCredentails`选项表明了是否是跨域请求withCredentials:false,//default//`adapter`适配器选项允许自定义处理请求,这会使得测试变得方便//返回一个promise,并提供验证返回adapter: function(config){/*..........*/},//`auth`表明HTTP基础的认证应该被使用,并提供证书//这会设置一个authorization头(header),并覆盖你在header设置的Authorization头信息auth: {username:"zhangsan",password: "s00sdkf"},//返回数据的格式//其可选项是arraybuffer,blob,document,json,text,streamresponseType:'json',//default//xsrfCookieName: 'XSRF-TOKEN',//defaultxsrfHeaderName:'X-XSRF-TOKEN',//default//`onUploadProgress`上传进度事件onUploadProgress:function(progressEvent){//下载进度的事件
onDownloadProgress:function(progressEvent){
}},//相应内容的最大值maxContentLength:2000,//`validateStatus`定义了是否根据http相应状态码,来resolve或者reject promise//如果`validateStatus`返回true(或者设置为`null`或者`undefined`),那么promise的状态将会是resolved,否则其状态就是rejectedvalidateStatus:function(status){return status >= 200 && status <300;//default},//`maxRedirects`定义了在nodejs中重定向的最大数量maxRedirects: 5,//default//`httpAgent/httpsAgent`定义了当发送http/https请求要用到的自定义代理//keeyAlive在选项中没有被默认激活httpAgent: new http.Agent({keeyAlive:true}),httpsAgent: new https.Agent({keeyAlive:true}),//proxy定义了主机名字和端口号,//`auth`表明http基本认证应该与proxy代理链接,并提供证书//这将会设置一个`Proxy-Authorization` header,并且会覆盖掉已经存在的`Proxy-Authorization` headerproxy: {host:'127.0.0.1',port: 9000,auth: {username:'skda',password:'radsd'}},//`cancelToken`定义了一个用于取消请求的cancel token//详见cancelation部分cancelToken: new cancelToken(function(cancel){})
}
五、请求返回的内容
{data:{},status:200,//从服务器返回的http状态文本statusText:'OK',//响应头信息headers: {},//`config`是在请求的时候的一些配置信息config: {}
}
- 你可以这样来获取响应信息
axios.get('/user/12345') then(function(res){console.log(res.data);console.log(res.status);console.log(res.statusText);console.log(res.headers);console.log(res.config); })
六、默认配置
- 你可以设置默认配置,对所有请求都有效
1、 全局默认配置
axios.defaults.baseURL = 'http://api.exmple.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['content-Type'] = 'appliction/x-www-form-urlencoded';
2、 自定义的实例默认设置
//当创建实例的时候配置默认配置
var instance = axios.create({baseURL: 'https://api.example.com'
});//当实例创建时候修改配置
instance.defaults.headers.common["Authorization"] = AUTH_TOKEN;
3、 配置中的有优先级
- config配置将会以优先级别来合并,顺序是lib/defauts.js中的默认配置,然后是实例中的默认配置,最后是请求中的config参数的配置,越往后等级越高,后面的会覆盖前面的例子。
//创建一个实例的时候会使用libray目录中的默认配置 //在这里timeout配置的值为0,来自于libray的默认值 var instance = axios.create(); //回覆盖掉library的默认值 //现在所有的请求都要等2.5S之后才会发出 instance.defaults.timeout = 2500; //这里的timeout回覆盖之前的2.5S变成5s instance.get('/longRequest',{timeout: 5000 });
七、拦截器
1、你可以在请求、响应在到达then/catch
之前拦截他们
//添加一个请求拦截器
axios.interceptors.request.use(function(config){//在请求发出之前进行一些操作return config;
},function(err){//Do something with request errorreturn Promise.reject(error);
});
//添加一个响应拦截器
axios.interceptors.response.use(function(res){//在这里对返回的数据进行处理return res;
},function(err){//Do something with response errorreturn Promise.reject(error);
})
2、取消拦截器
var myInterceptor = axios.interceptor.request.use(function(){/*....*/});
axios.interceptors.request.eject(myInterceptor);
3、 给自定义的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.header);}else {//一些错误是在设置请求的时候触发console.log('Error',error.message);}console.log(error.config);});
九、取消
你可以通过一个
cancel token
来取消一个请求你可以通过
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 {//handle error} });//取消请求(信息的参数可以设置的) source.cance("操作被用户取消");
- 你可以给cancelToken构造函数传递一个executor function来创建一个cancel token:
var cancelToken = axios.CancelToken; var cance; axios.get('/user/12345',{ cancelToken: new CancelToken(function(c){//这个executor函数接受一个cancel function作为参数cancel = c; }) }) //取消请求 cancel();
参考:http://www.jianshu.com/p/df464b26ae58
axios在vue中的简单配置与使用相关推荐
- vux-ui html版本,Vue中的Vux配置指南
简介 Vux(读音 [v'ju:z],同views)是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面. 基于webpack+vue-loader+vux可以快速开发移动端页面 ...
- 前端开发:axios在vue中的使用
Aixos 1.Aixos特性 (1)支持Promise API (2)拦截请求和响应 (3)装换请求数据和响应数据 (4)取消请求 (5)自动转换JSON数据 (6)客户端支持防御XSRF 2.Ax ...
- Vuex 入门前的小菜 - “Vue 中的简单状态共享机制实现”
PS:本文主要内容来自于官方文档,外加个人理解,作为个人学习记录. 1. 什么是状态共享机制? 首先说一下这里的"状态",状态主要是指 Vue 组件的 data 字段. 状态共享机 ...
- vue中webpack默认配置_Vue-cli 中 Webpack 配置优化(一)
一.前言 最近一段时间在学习 Webpack 方面的知识.在学习的过程中主要配置的是 webpack.config.js 文件. 但是在 Vue-cli 3.x 下,已经对 Webpack 做了深度的 ...
- vue中的config配置
在webpack.base.conf文件中配置别名以及扩展名 resolve: {extensions: ['.js', '.vue', '.json', '.styl'],alias: {'vue$ ...
- vue中webpack默认配置_webpack中Entry与Output的基础配置
本文衔接上一篇文章: 不睡觉的怪叔叔:webpack的插件zhuanlan.zhihu.com 一.多入口打包的配置 webpack支持多入口的打包操作吗?答案是肯定的! 让我们修改webpack. ...
- vue中实现简单答题卡,问卷调查逻辑(单选,多选,简答);
1.业务要求:一个简单的在线问卷调查,有单选,多选,简答题,侧栏显示题号,通过题号颜色判断,盖题目是否已答,答题完整才能提交; 前提:首先正常项目中数据肯定是后台请求回来的,所以数据格式必须和后端商量 ...
- vue中路径的配置使用
绝对路径使用: 在项目中build文件夹下的webpack.base.conf.js的 使用如下: import mock from '@/mock/mock.js'; html 相对路径使用 1. ...
- eclipse中tomcat简单配置
首先,你要确保你下载的eclipse是Java EE的. 然后点击进入,选一个你想在里面操作的文件,这里我是随便选了一个 点击Lanch,进入以后,可以在最下面看到 点击Servers 大致意思就是 ...
最新文章
- 李开复:AI巨头是有史以来最难以打破的垄断
- libsybcomn64.dll php,libsybcomn.dll下载|
- 《Docker技术入门与实战》——2.3 本书环境介绍
- WinAPI: midiOutCachePatches - 预装音色
- mac上安装Chromedriver注意事宜
- Hive窗口函数(over/partition by/order by/window/序列函数)总结与实践
- linux鼠标滚轮不能上下滚动页面,解决办法:如果鼠标滚轮无法上下滚动怎么办...
- 剪贴板增强工具 Ditto
- 无监督学习与有监督学习的本质区别是什么_深度学习使用无监督学习检测模式...
- Cocos2d-x 3.0 开发(七)在程序中处理cocoStudio导出动画
- sybase数据库与oracle,Oracle访问Sybase数据库的方法
- Jquery中BlockUI的遮罩效果详解
- spss软件下载安装
- Unity实现功能之局域网实时语音
- 【练习赛】2022年高教杯数学建模C题(第一题的第一小问)
- 再见铁饭碗!又一行业被颠覆!国内第一家无人银行,在上海正式开业!
- 巨简单又好用的pygame游戏暂停继续方法
- 【学习笔记】VGG 网络结构
- 计算机毕业设计(42)java小程序毕设作品之小说电子书阅读小程序系统
- 第一次独立使用大型无人船记录日志—第2天