1、网络请求的方式
发送网络的请求方式有很多种,到目前为止,已了解过原生ajax,jquery中的ajax,等诸多网络的请求的方式。
1.1 原生的Ajax
原生的Ajax是基于XMLHttpRequest(XHR)封装的
我们都知道原生的ajax不但有兼容问题,而且配置和调用都比较混乱复杂,这不推荐使用。
1.2 jquery中的Ajax
JQuery的ajax相对于原生的ajax来说非常好用,但是JQuery的ajax是嵌入在整个JQuery中的,因此如果我们要使用JQuery的ajax,就需要引入整体的jquery但是在Vue项目的整个开发过程中都不需要在使用JQuery,只为了用一个ajax,引入整体的JQuery,因此,并不推荐使用。
1.3 Vue在1.X版本是推出了Vue-resource插件
Vue-resource相较于JQuery要轻量很多,但是Vue从2.X以后就表示不再更新维护了,如果使用它处理Ajax请求,未来代码的维护上,是有很多的安全隐患的,包括现在vue官网也不推荐使用vue-resource处理ajax,vue官网推荐使用axios处理ajax.
1.4 axios请求
axios的优点:除了数据请求之外,还有包括fetch,jsonp等很多方式帮我们处理数据请求。
2、axios请求的了解与使用
2.1 axios请求的特点
1. 支持node端和浏览器端:同样的API,node和浏览器全支持,平台切换无压力
2. 支持Promise:使用Promise管理异步,告别传统的callback方式
3. 丰富的配置项:支持请求和响应的拦截,提前处理请求和响应数据
2.2.1 安装axios包
npm install axios
2.2.2 引入使用axios
//引入包
import axios from "axios"
2.2.3 发送基本的请求
//使用axios(get请求)
axios({
url:"http://api.github.com/users"
}).then( (result) => {
console.log(result);
})
注意:没有请求类型,axios默认请求为get请求,如果希望发送post 等其他方式的请求,可以在配置对象中添加method选项
// 使用axios(post请求)
axios({
url:"https://jsonplaceholder.typicide.com/posts",
method: "post"
}).then( (result) => {
console.log(result);
})
2.2.4 配置对象中指定get请求参数
可以像传统的get请求参数一样在url路径后面拼接请求数据
axios({
url:"https://jsonplaceholder.typicide.com/posts?userId=1",
}).then( (result) => {
console.log(result);
})
也可以将get请求的数据放在axios的配置对象中,例如:将get请求数据放在配置对象的params选项中
axios({
url:"https://jsonplaceholder.typicide.com/posts",
params:{
userId : 1
}
}).then( (result) => {
console.log(result);
})
3、axios的请求方式
1. axios(config)
2. axios.request(config)
3. axios.get(url[, config ])
4. axios.delete(url[, config ])
5. axios.head(url[, config ])
6. axios.options(url[, config ])
7. axios.post(url[, data[, config] ])
8. axios.put(url[, data[, config] ])
9. axios.patch(url[, data[, config] ])
在axios()请求的配置对象中配置请求方式,axios也提供了通过不同的方式发送请求。
指定了请求方式发送请求说明
1. 第一个参数将是发送的url
2. 第二个参数是请求的配置对象,可以省略,使用默认配置