1. 网络请求
-
Vue
中发送网络请求有非常多的方式,那么在开发中,如何选择呢 -
Ajax:
传统的Ajax
是基于XMLHttpRequest(XHR)
,配置和调用方式等非常混乱所以真实开发中很少直接使用,
而是使用jQurey-Ajax
-
jQurey-Ajax:
在Vue
的整个开发中都不需要使用jQuery
了,所以我们不会为了一个网络请求,就引进jQuery
,
因为jQuery
的代码1万
多行,Vue
的代码才1万
多行 -
Vue-resource:
官方在Vuel.x
的时候就推出了Vue-resource
,它的体积比jQuery
小很多,在Vue2.0
推出后,
Vue
的作者决定去掉Vue-resource
,并且以后再也不会更新,所以使用它对项目的开发和维护存在很大的隐患 -
axios:
官方推荐使用
2. 网络模块 axios
2.1 axios
的功能特点
- 在浏览器中发送
XMLHttpRequests
请求 - 在
node.js
中发送http
请求 - 支持
PromiseAPI
- 拦截请求和响应
- 转换请求和响应数据
2.2 axios
的使用
-
axios
的安装:npm install axios --save
-
页面导入:
import axios from 'axios'
-
使用:
axios({ url:'http://123.207.32.32:8000/home/multidata', // params是针对get请求的参数拼接 params:{ type:'pop', page:1 } }).then(res => { console.log(res) }) // 注:axios方法默认返回一个Promise对象,所以在后面可以直接用then处理请求回来的数据 // method:'get' 设置请求的类型,默认为get
-
axios
发送并发请求
//比如有时候我们可能需要同时发送两个请求: axios.all(