axios简介
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：
- 从浏览器中创建 XMLHttpRequest
- 从 node.js 发出 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防止 CSRF/XSRF
引入方式
npm install axios --save
使用
axios并没有install 方法，所以是不能使用vue.use()方法的。
那么难道每个文件都要来引用一次？解决方法有很多种：
- .结合 vue-axios使用
- axios 改写为 Vue 的原型属性
- 结合 Vuex的action
vue-axios使用
首先在主入口文件main.js中引用
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios);
之后就可以使用了，在组件文件中的methods里去使用了
getdata(){
this.axios.get('/vue-demo/api/getdata').then((response)=>{
console.log(response.data)
}).catch((response)=>{
console.log(response)
})
}
通过使用easy-mack实现一个接口的请求
1533094933431.png
1533094944634.png
通过设置proxyTable实现跨域请求
proxyTable: { //设置地址代理，跨域请求外部链接
'/vue-demo': {
target: 'https://easy-mock.com/mock/5b6127a76551d73d713927c4/',
changeOrigin: true,
pathRewrite: {
'^/vue-demo': '/vue-demo'
}
}
}
npm run dev
访问地址通过一个组件的触发请求easy-mock的接口，就可以看到返回的数据了
1533095093186.png
axios 改写为 Vue 的原型属性
首先在主入口文件main.js中引用，之后挂在vue的原型链上
import axios from 'axios'
Vue.prototype.$ajax= axios
在组件中使用
this.$ajax.get('api/getNewsList').then((response)=>{
this.newsList=response.data.data;
}).catch((response)=>{
console.log(response);
})
Vuex的action
在vuex的仓库文件store.js中引用，使用action添加方法
import Vue from 'Vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
const store = new Vuex.Store({
// 定义状态
state: {
user: {
name: 'xiaoming'
}
},
actions: {
// 封装一个 ajax 方法
login (context) {
axios({
method: 'post',
url: '/user',
data: context.state.user
})
}
}
})
export default store
在组件中发送请求的时候，需要使用 this.$store.dispatch
methods: {
submitForm () {
this.$store.dispatch('login')
}
}
