vue官方已經宣佈vue-resource官方已經中止維護,推薦使用axios,我就把以前的項目用更換爲axios。遇到了一些問題,經過查找資料,總結一下。vue
兩種方法,一種直接把axios掛載到vue構造函數的prototype屬性上,組件中經過this.axios來拿到axios
第二種方法就是經過vue-axios來全局使用axios,組件中也是經過this.axios來拿到axiosios
// 第一種方法 // 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方法params傳遞參數vue-cli
// 組件中使用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參數json
// 組件中使用post方法 import qs form 'qs' this.axios.post(url, qs.stringify({a: 1, b: 2})) .then(res => { // 成功回調 }, res => { // 錯誤回調 })
以koa爲例,koa中經過body-parse插件處理後再獲取get和post參數axios
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)