axios

• Promise based HTTP client for the browser and node.js

  • 以Promise為基礎的HTTP客戶端，適用於：瀏覽器和node.js
  • 封裝ajax，用來發送請求，非同步獲取資料

// 在瀏覽器中使用，直接引入js檔案使用下面的GET/POST請求方式即可
// 1 引入 axios.js
// 2 直接呼叫axios提供的API傳送請求

created: function () {
  axios.get(url)
    .then(function(resp) {})
}

--- 

//
 
 配合 webpack 使用方式如下：
import Vue from 'vue'
import axios from 'axios'
// 將 axios 新增到 Vue.prototype 中
Vue.prototype.$axios = axios

---
// 在元件中使用：
methods: {
  getData() {
    this.$axios.get('url')
      .then(res => {})
      .catch(err => {})
  }
}

---
// API使用方式：

axios.get(url[, config])
axios.post(url[, data[, config]])
axios(url[, config])
axios(config)
 

Get 請求

const url = 'http://vue.studyit.io/api/getnewslist'

// url中帶有query引數
axios.get('/user?id=89')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// url和引數分離，使用物件
axios.get('/user', {
  params: {
    id: 12345
  }
})

Post 請求

• 不同環境中處理 POST請求
• 預設情況下，axios 會將JS物件序列化為JSON物件。為了使用 application/x-www-form-urlencoded 格式傳送請求，我們可以這樣：

// 使用 qs 包，處理將物件序列化為字串
// npm i -S qs
// var qs = require('qs')
import qs from 'qs'
qs.stringify({ 'bar': 123 }) ===> "bar=123"
axios.post('/foo', qs.stringify({ 'bar': 123 }))

// 或者：
axios.post('/foo', 'bar=123&age=19')

const url = 'http://vue.studyit.io/api/postcomment/17'
axios.post(url, 'content=點個贊不過份')

axios.post('/user', qs.stringify({
    firstName: 'Fred',
    lastName: 'Flintstone'
  }))
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

全域性配置

// 設定請求公共路徑：
axios.defaults.baseURL = 'http://vue.studyit.io'