Vue2.0 搭配 axios

一、安裝axios

$ npm install axios

二、Demo

（1）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);
  });

（2）POST

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

（3）多個併發請求

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) {
    // 兩個請求如今都執行完成
  }));

三、經常使用方法：

爲方便起見，爲全部支持的請求方法提供了別名

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
NOTE
在使用別名方法時， url、method、data 這些屬性都沒必要在配置中指定。

併發
處理併發請求的助手函數

axios.all(iterable)
axios.spread(callback)

 

四、一個登陸的場景，用axios發送post請求去登陸，能成功返回數據，可是用做權限驗證的cookie就是沒有保存,經查閱，axios 默認不發送cookie，跨域也是一個緣由，須要全局設置

axios.defaults.withCredentials = true 

五、將axios發送的數據格式轉換爲form-data格式

//npm install axios的時候默認會安裝qs
//qs相關的問題請搜索"nodejs qs"或者看這裏https://www.npmjs.com/package/qs
import qs from 'qs';

// 將請求數據轉換爲form-data格式
// 這裏不用qs，用FormData也能夠，不贅述
var data = qs.stringify({
  currentPage: "0",
  pageSize: "10",
  type: "1",
});

axios.post('/url', data)
.then(function (response) {
    //
})
.catch(function (error) {
//
});

六、Vue-cli proxyTable 解決開發環境的跨域問題（在vue-cli的config文件index.js裏有一個參數叫proxyTable）

proxyTable: {
  '/list': {
    target: 'http://api.xxxxxxxx.com',
    changeOrigin: true,
    pathRewrite: {
      '^/list': '/list'
    }
  }
}

changeOrigin：設置true，本地虛擬一個服務端接收你的請求並代你發送該請求