vue-cli中使用axios

vue-cli中使用axios

vue官方已經宣佈vue-resource官方已經中止維護,推薦使用axios,我就把以前的項目用更換爲axios。遇到了一些問題,經過查找資料,總結一下。vue

如何在vue中全局使用axios

兩種方法,一種直接把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與post方法

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)
相關文章
相關標籤/搜索