vue-cli中使用axios
vue官方已经宣布vue-resource官方已经停止维护,推荐使用axios,我就把之前的项目用更换为axios。遇到了一些问题,通过查找资料,总结一下。
如何在vue中全局使用axios
两种方法,一种直接把axios挂载到vue构造函数的prototype属性上,组件中通过this.axios来拿到axios
第二种方法就是通过vue-axios来全局使用axios,组件中也是通过this.axios来拿到axios
// 第一种方法
// main.js
import Vue from 'vue'
import axios from 'axios'
Vue.prototype.axios = axios
//第二种方法
// main.js
import Vue from 'vue'
import axios from 'axios'
import Vueaxios from 'vue-axios'
Vue.use(Vueaxios, axios)
axios的get与post方法
axios的get方法params传递参数
// 组件中使用get方法
this.axios.get(url, parmas: {a: 1, b: 2})
.then(res => {
// 成功回调
}, res => {
// 错误回调
})
// 组件中使用post方法
this.axios.post(url, {a: 1, b: 2})
.then(res => {
// 成功回调
}, res => {
// 错误回调
})
对于post方式,提交的数据必须放在消息主体中,服务器通过消息头中的Content-Type字段来获知请求中的消息主体是用何种方式编码,再对主体进行解析,Content-Type比较常见的有application/x-www-form-urlencoded和application/json等,axios的post的方法的参数默认是发送json格式,有的后端不能解析json格式,我们可以用qs库中的stringify来转化参数,使后端可以解析出post参数
// 组件中使用post方法
import qs form 'qs'
this.axios.post(url, qs.stringify({a: 1, b: 2}))
.then(res => {
// 成功回调
}, res => {
// 错误回调
})
后端获取参数
以koa为例,koa中通过body-parse插件处理后再获取get和post参数
import Koa from 'koa'
import bodyparser from 'koa-bodyparser'
const app = new Koa()
app.use(bodyparser({enableTypes: ['json', 'form', 'text']}))
app.use((ctx, next) => {
// get请求
if (ctx.method === 'get') {
const { a, b } = ctx.query // 用ctx.query获取get请求参数
ctx.body = { a, b } // 返回参数
}
// post请求
if ((ctx, next)) {
const { a, b } = ctx.request.body // 用ctx.request.body获取post请求参数
ctx.body = { a, b } // 返回参数
}
})
app.listen(8088)