vue官方已經(jīng)宣布vue-resource官方已經(jīng)停止維護(hù),推薦使用axios,我就把之前的項(xiàng)目用更換為axios。遇到了一些問(wèn)題,通過(guò)查找資料,總結(jié)一下。
兩種方法,一種直接把a(bǔ)xios掛載到vue構(gòu)造函數(shù)的prototype屬性上,組件中通過(guò)this.axios來(lái)拿到axios
第二種方法就是通過(guò)vue-axios來(lái)全局使用axios,組件中也是通過(guò)this.axios來(lái)拿到axios
// 第一種方法// main.jsimport Vue from 'vue'import axios from 'axios'Vue.prototype.axios = axios//第二種方法// main.jsimport Vue from 'vue'import axios from 'axios'import Vueaxios from 'vue-axios'Vue.use(Vueaxios, axios)
axios的get方法params傳遞參數(shù)
// 組件中使用get方法this.axios.get(url, parmas: {a: 1, b: 2}) .then(res => { // 成功回調(diào) }, res => { // 錯(cuò)誤回調(diào) })// 組件中使用post方法this.axios.post(url, {a: 1, b: 2}) .then(res => { // 成功回調(diào) }, res => { // 錯(cuò)誤回調(diào) })
對(duì)于post方式,提交的數(shù)據(jù)必須放在消息主體中,服務(wù)器通過(guò)消息頭中的Content-Type字段來(lái)獲知請(qǐng)求中的消息主體是用何種方式編碼,再對(duì)主體進(jìn)行解析,Content-Type比較常見(jiàn)的有application/x-www-form-urlencoded和application/json等,axios的post的方法的參數(shù)默認(rèn)是發(fā)送json格式,有的后端不能解析json格式,我們可以用qs庫(kù)中的stringify來(lái)轉(zhuǎn)化參數(shù),使后端可以解析出post參數(shù)
// 組件中使用post方法import qs form 'qs'this.axios.post(url, qs.stringify({a: 1, b: 2})) .then(res => { // 成功回調(diào) }, res => { // 錯(cuò)誤回調(diào) })
以koa為例,koa中通過(guò)body-parse插件處理后再獲取get和post參數(shù)
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請(qǐng)求 if (ctx.method === 'get') { const { a, b } = ctx.query // 用ctx.query獲取get請(qǐng)求參數(shù) ctx.body = { a, b } // 返回參數(shù) } // post請(qǐng)求 if ((ctx, next)) { const { a, b } = ctx.request.body // 用ctx.request.body獲取post請(qǐng)求參數(shù) ctx.body = { a, b } // 返回參數(shù) } }) app.listen(8088)
聯(lián)系客服