在Vue中实现发送网络请求
原理
: Vue.js中发送网络请求本质还是ajax,我们可以使用插件方便操作。
- vue-resource: Vue.js的插件,已经不维护,不推荐使用
- axios :
不是vue的插件
,可以在任何地方使用,推荐
说明
: 既可以在浏览器端
又可以在**node.js
**中使用的发送http请求的库,支持Promise ,不支持jsonp如果遇到jsonp请求, 可以使用插件
jsonp
实现
基础-axios-介绍-及基本使用
用法:
// 基本用法 axios.get(url).then((res) => { // 请求成功 会来到这 res响应体 }).catch((err) => { // 请求失败 会来到这 处理err对象 })
// 获取 axios.get('http://localhost:3000/brands').then().catch() // 删除 axios.delete('http://localhost:3000/brands/1').then().catch() // 添加 axios.post('http://localhost:3000/brands', {name: '小米', date: new Date()}).then().catch() // 修改 axios.put('http://localhost:3000/brands/1', {name: '小米', date: new Date()}).then().catch() // get模糊搜索 axios.get("http://localhost:3000/brands?name_like=" + "aaa").then().catch()
基础-表格案例-axios-列表
目标:
将表格案例中列表数据实现用axios请求
路径:
使用axios请求列表
- 引入axios
- 在mounted(相当于window.onload)函数中 发送请求获取数据
- 获取的数据赋值给list列表
// mounted函数 加载完DOM再执行的函数 相当于window.onload mounted() { axios.get("http://localhost:3000/brands").then(result => { this.list = result.data; }); }
注意
:mounted函数相当于window.onload,后面会详细的讲到
基础-表格案例-axios-删除商品
路径:
使用axios删除商品 1.删除方法中传入ID
2.删除方法中调用删除接口
3.删除完成后重新调用获取数据
代码:
delItem(id) { if (confirm("确定删除此条记录")) { axios .delete("http://localhost:3000/brands/" + id) .then(result => { this.getList(); // 重新调用拉取数据 }); } }
基础-表格案例-axios-添加商品
路径:
使用axios添加商品 1. 添加方法中调用新增接口
2. 添加成功后重新拉取数据
3. 清空输入框
addItem() { // 添加商品 axios.post("http://localhost:3000/brands", { name: this.name, date: new Date() }) .then(res => { if (res.status == 201) { this.getList(); // 重新拉取数据 this.name = ""; // 清空文本框 } });
基础-表格案例-axios-搜索功能-分析
目标:
通过分析得出 计算属性中不能进行搜索功能的结论 计算属性=> 异步操作搜索=>返回结果 XXXXX 走不通
结论:
搜索功能不能采用计算属性
进行解决
注意:
计算属性中一定是**同步操作
,如果有异步
**操作,则该业务逻辑就会失败
新知识:
当需要根据数据变化 进行相应业务操作,且该操作是**异步操作
**时,计算属性不能再使用,可以使用侦听属性watch
基础-实例选项-watch-基本使用
特性:
监听data数据变化时 自动触发函数计算属性和watch区别:
- 计算属性 必须要有返回值 所以说不能写异步请求 因为有人用它的返回值(插值表达式)
- watch选项中可以写很多逻辑 不需要返回值 因为没有人用它的返回值
// 基本用法 data: { msg: 'abc' }, watch: { // data中的属性msg发生改变时 自动触发该函数 msg(newV, oldV) { console.log(newV, oldV) } }
基础-表格案例-axios-搜索功能-实现
- 监听搜索内容
- 在监听函数中 发送axios请求实现模糊搜索
- 把返回值赋值给list列表
// 实例代码 watch: { searchval(newV, oldV) { axios.get("http://localhost:3000/brands?name_like=" + newV) .then((res) => { this.list = res.data }).catch(err => { console.log(err) }) } }