vue-axios简单使用

vue - Axios库

使用场景：前后端分离的应用程序中，后端只负责提供API请求接口，前端使用Ajax获取服务器数据。

服务器端API接口，一般采用 RESTful API 形式提供。

使用请求数据的方式:

直接使用原生 XMLHTTPRequest 对象
使用 jQuery 提供的Ajax方法
使用 axios 库

axios库简介：

基于 promise 的 HTTP 库，可以用在浏览器和node.js 环境中。

主要优点：

	    轻量级JS库，可以单独使用；
	    支持Promise API，解决JS“回调函数地狱”问题；
	    支持发送cookie、HTTP认证、并发请求、请求和响应的拦截、取消请求等；
	    自动转换JSON数据，特别适用于 RESTful API 场景。

Get请求

第一种格式

axios.get(‘地址?参数’).then(function(res){ } ).catch(function(err){ })

第二种格式 把参数写在 parmas 属性中

Axios.get(‘地址’,{  parmas:{ 参数 } }).then(function(res){ } )

Post请求

Axios.post(‘地址’,{  parmas:{ 参数 } }).then(function(res){ } )

但此种方法, 请求内容发送为json格式,需要服务器端支持

axios不支持jsonp的格式 如果要解决跨域需要配置vue.config.js

单条请求配置 请求时不在加入前面的url地址

devServer:{
	proxy:'http://api.apishop.net'
}

多条请求配置: 需要用到 target(绑定) 与pathRewrite(路由重写)

proxy:{
		'/cat':{
		    target:'http://api.apishop.net',//
				pathRewrite:{
					'^/cat':'http://api.apishop.net'
				
				}
		}
}