vue-cli中使用axios

vue官方已經宣布vue-resource官方已經停止維護，推薦使用axios，我就把之前的項目用更換為axios。遇到了一些問題，通過查找資料，總結一下。

如何在vue中全局使用axios

兩種方法，一種直接把axios掛載到vue構造函數(shù)的prototype屬性上，組件中通過this.axios來拿到axios
第二種方法就是通過vue-axios來全局使用axios，組件中也是通過this.axios來拿到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與post方法

axios的get方法params傳遞參數(shù)

// 組件中使用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方式，提交的數(shù)據(jù)必須放在消息主體中，服務器通過消息頭中的Content-Type字段來獲知請求中的消息主體是用何種方式編碼，再對主體進行解析，Content-Type比較常見的有application/x-www-form-urlencoded和application/json等，axios的post的方法的參數(shù)默認是發(fā)送json格式，有的后端不能解析json格式，我們可以用qs庫中的stringify來轉化參數(shù)，使后端可以解析出post參數(shù)

// 組件中使用post方法import qs form 'qs'this.axios.post(url, qs.stringify({a: 1, b: 2}))  .then(res => {    // 成功回調
  }, res => {    // 錯誤回調
  })

后端獲取參數(shù)

以koa為例，koa中通過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請求
  if (ctx.method === 'get') {    const { a, b } = ctx.query  // 用ctx.query獲取get請求參數(shù)
    ctx.body = { a, b }         // 返回參數(shù)
  }   // post請求
   if ((ctx, next)) {     const { a, b } = ctx.request.body  // 用ctx.request.body獲取post請求參數(shù)
     ctx.body = { a, b }                // 返回參數(shù)
   }
})

app.listen(8088)