Axios
什么是:Axios是一个基于promise的HTTP库,可以用在浏览器和node.js中。
何时:
主要用于创建请求
在浏览器中,创建xhr请求,在node.js中,创建普通http请求
为什么:
浏览器中创建xhr请求,4种方案:
①使用原生XXHR对象----麻烦
②使用jQuery的封装函数----大材小用(jQuery中岂止ajax,还包含大量DOM/动画等操作,
而Vue只使用ajax,别的都不用。)
③使用官方提供的VueResource插件----官方废弃
④使用第三方工具Aaxios----本身与Vue没有任何关系
Vue.js生态系统(Ecosystem):Vue.js、Axios、Vue-Router、Vuex、MintUI、ElementUI、Weex
如何:
1. ①在HTML页面中引入JS文件
<script src="js/axios.min.js"></script>
②在全局添加axios对象,包含发送http请求的api
2.调用axios,发起异步请求
Get请求:
①axios.get("url",{
params:{
//get方式下,随url发送的参数
}
}).then(res=>{ ... })
②服务器端跨域CORS:
不能用res.send(...)
只能res.writeHeader(200,{"Access-Control-Aallow-Origin":"" });
res.write(JSON.stringify(result));
res.end();
Post请求:
①axios.post("url","变量=值&变量=值&...").then()
坑!!!get和post方法传参时,配置属性名不一样:
Get请求传参,用的是params:{ }对象
Post请求传参,必须用字符串
②解决:引入qs模块 <script src="js/qs.min.js"></script>
使用axios.post("url",Qs.stringify({参数:值,参数:值,...})).then()
结果:stringify会将对象转化为queryString语法
坑!!!:获得响应主体的数据,数据不是直接返回,而是包裹在一个对象的data属性中返回
无论时get还是post方式请求,获得响应数据都是一个全新的对象,传统的响应数据,包含在该对象res.data属性中
所以,res.data,才能获得之前的响应结果。