1.发送网络请求的方式
1.1传统的Ajax是基于XMLHttpRequest(XHR)
为什么要用它呢?
.非常好解释,配置和调用方式等非常混乱
.编码起来看起来就非常不好
.所以真实开发中很少直接使用,而是使用jQuery-Ajax
1.2JQuery-Ajax
相对于传统的Ajax非常好用
为什么不选择它呢?
.首先,我们先明确一点:在vue的整个开发中都是不需要使用jQuery了
.那么,就意味着为了方便我们进行网络请求,特意引用一个jQuery,你觉得合理吗?
.jQuery的代码1w+行
.Vue的代码才1w+行
.完全没有必要为了用网络请求就引入重量级的框架
1.3Vue-resource
.Vue-resource的体积相对于jQuery小很多
.另外Vue-resource是官方推出的
为什么不选择它呢?
.在Vue2.0退出后,Vue作者就在GitHub的Issues中说明了去掉vue-resource,并且以后也不在更新
.那么意味着以后vue-resource不再支持新的版本时,也不会再继续更新和维护
.对以后的项目开发和维护都存在很大的隐患
1.4axios(当前推荐的)
为什么选择它呢?
.axios有非常多的优点,并且用起来也非常方便
功能特点:
.在浏览器中发送XMLHttpRequest请求
.在node.js中发送http请求
.支持Promise API
.拦截请求和响应
.转换请求和响应数据
2.axios相关使用
1.安装相关的插件
npm install axios --save
2.axios简单使用
import axios from "axios";
axios({
url:'http://123.207.32.32:8000/home/multidata',
method:'get'
}).then(res=>{
console.log(res);
})
axios({
url:'http://123.207.32.32:8000/home/data',
method:'get',
params:{
type:'sell',
page:3
}
}).then(res=>{
console.log(res);
})
//设置默认连接前缀
axios.defaults.baseURL='http://123.207.32.32:8000'
//设置默认的超时时间
axios.defaults.timeout=5000
axios.all([axios({
url:'http://123.207.32.32:8000/home/multidata',
}),axios({
url:'http://123.207.32.32:8000/home/data',
params:{
type:'sell',
page:3
}
})]).then(results=>{
console.log(results);
})
3.axios设置多个默认的地址
const instance1=axios.create({
baseURL:"http://123.207.32.32:8000",
timeout:5000
})
const instance2=axios.create({
baseURL:"http://123.207.32.32:8000",
timeout:6000
})
instance1({
url:'/home/multidata'
}).then(res=>{
console.log(res);
})
instance2({
url:"/home/data",
params:{
type:'sell',
page:3
}
}).then(results=>{
console.log(results);
})
4.axios对网络请求的封装
4.1 在src里面创建network的文件夹,在里面创建一个request.js的文件
4.2 在request.js创建网络请求的代码
import axios from "axios";
//方法一
export function request(config,success,failure) {
//1.创建axios的实例
const instance=axios.create({
baseURL:"http://123.207.32.32:8000",
timeout:5000
})
//发送真正的网络请求
instance(config)
.then(res=>{
/// console.log(res);
success(res)
}).catch(err=>{
//console.log(err);
failure(err)
})
}
//方法二
/*export function request(config) {
return new Promise((resolve,reject)=>{
//1.创建axios的实例
const instance=axios.create({
baseURL:"http://123.207.32.32:8000",
timeout:5000
})
//发送真正的网络请求
instance(config)
.then(res=>{
resolve(res)
}).catch(err=>{
reject(err)
})
})
}*/
export function request(config) {
//1.创建axios的实例
const instance=axios.create({
baseURL:"http://123.207.32.32:8000",
timeout:5000
})
//发送真正的网络请求
return instance(config)
}
43 在外部进行调用创建网络请求的方法
//方法一(4.2方法1)
//5.封装request模块
import {request} from "./network/request";
request({
url:'/home/multidata'
},res=>{
console.log(res);
},err=>{
console.log(err);
})
//方法二(4.2方法2)
//5.封装request模块
import {request} from "./network/request";
request({
url:'/home/multidata'
}).then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
})