axios

最近通過 Vuejs 重構旅游頁面項目使用到 axios 獲取數據。對照官方文檔，簡要記錄一些 axios 的使用方法和特性，方便日後參考和查閱。

axios

基於 promise 用於瀏覽器和 node.js 的 http 客戶端

安裝

npm 安裝

npm install axios

通過 cdn 引入

<script src="https://cdn.bootcss.com/axios/0.18.0/axios.js"></script>

用法

執行 GET 請求

// 為給定 ID 的 user 創建請求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 可選地，上面的請求可以這樣做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

執行 POST 請求

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

執行多個併發請求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 兩個請求現在都執行完成
  }));

其他

設置 mock數據 開發環境轉發代理

在 Vue-cli 腳手架工具之下
設置 config 文件夾下的 index.js
設置 module.exports 下 dev 的 proxyTable 代理
webpack-dev-server 工具會自動將 /api 替換成 /static/mock
從而達到不用改動項目代碼的目的

proxyTable: {
  '/api': {
    target: 'http://localhost:8080',
    pathRewrite: {
      '^/api': '/static/mock'
    }
  }
}

參考

axios 全攻略