一、前言
Vue
原本有一个官方推荐的 ajax
插件 vue-resource
,但是自从 Vue
更新到 2.0
之后,官方就不再更新 vue-resource
。
目前主流的 Vue
项目,都选择 axios
来完成 ajax
请求,而大型项目都会使用 Vuex
来管理数据,所以这篇博客将结合两者来发送请求。
Vuex
安装将不再赘述,可以参考之前的博客《Vue进阶(五):与 Vuex 的第一次接触》。
二、axios
使用 cnpm
安装 axios
。
cnpm install axios -S
安装其他插件的时候,可以直接在 main.js
中引入并 Vue.use()
,但是 axios
并不能 use
,只能每个需要发送请求的组件中即时引入。
为了解决这个问题,有两种开发思路,一是在引入 axios
之后,修改原型链,二是结合 Vuex
,封装一个 aciton
。
2.1 改进方案一:改写原型链
首先在main.js
中引入 axios
。
import axios from 'axios'
这时候在其它的组件中,是无法使用 axios
命令的。但如果将 axios
改为 Vue
原型属性,就能解决这个问题。
Vue.prototype.$ajax = axios
在 main.js
中添加这两行代码之后,就能直接在组件的 methods
中使用 $ajax
命令
methods: {
submitForm () {
this.$ajax({
method: 'post',
url: '/user',
data: {
name: 'wise',
info: 'wrong'
}
})
}
2.2 改进方案二:Vuex 中封装
之前文章讲解过 Vuex
的 mutations
,从结果上看,mutations
类似于事件,用于提交 Vuex
中的状态 state
。
action
和 mutations
也很类似,主要的区别在于,action
可以包含异步操作,而且可以通过 action
来提交 mutations
。
另外还有一个重要的区别:
mutations
有一个固有参数state
,接收的是Vuex
中的state
对象;action
也有一个固有参数context
,但是context
是 state 的父级,包含state、getters
。
Vuex
的仓库是store.js
,将 axios
引入,并在 action
添加新的方法:
// store.js
import Vue from 'Vue'
import Vuex from 'vuex'// 引入 axios
import axios from 'axios'
Vue.use(Vuex)
const store = new Vuex.Store({
// 定义状态
state: {
test01: {
name: 'Wise Wrong'
},
test02: {
tell: '12312345678'
}
},
actions: {
// 封装一个 ajax 方法
saveForm (context) {
axios({
method: 'post',
url: '/user',
data: context.state.test02
})
}
}
})
export default store
注意:即使已经在 main.js
中引入了 axios
,并改写了原型链,也无法在 store.js
中直接使用 $ajax
命令。换言之,这两种方案是相互独立的。
在组件中发送请求的时候,需要使用this.$store.dispatch
来分发。
methods: {
submitForm () {
this.$store.dispatch('saveForm')
}
}
submitForm
是绑定在组件上的一个方法,将触发 saveForm,从而通过 axios
向服务器发送请求。
三、配置 axios
上面封装的方法中,使用了 axios
的三个配置项,实际上只有 url
是必须的,完整的 api
可以参考使用说明。
为了方便,axios
还为每种方法起了别名,比如上面的 saveForm 方法等价于:
计算机网络
-
HTTP 缓存
-
你知道 302 状态码是什么嘛?你平时浏览网页的过程中遇到过哪些 302 的场景?
-
HTTP 常用的请求方式,区别和用途?
-
HTTPS 是什么?具体流程
-
三次握手和四次挥手
-
你对 TCP 滑动窗口有了解嘛?
-
WebSocket与Ajax的区别
-
了解 WebSocket 嘛?
-
HTTP 如何实现长连接?在什么时候会超时?
-
TCP 如何保证有效传输及拥塞控制原理。
-
TCP 协议怎么保证可靠的,UDP 为什么不可靠?
算法
-
链表
-
字符串
-
数组问题
-
二叉树
-
排序算法
-
二分查找
-
动态规划
-
BFS
-
栈
-
DFS
-
回溯算法