前言

今天學習Vue官方推薦的請(qing)求(qiu)(qiu)工具(ju)Axios ，Axios 是一個基于(yu)(yu) promise 的 HTTP 庫，可用于(yu)(yu)瀏覽器和(he) node.js 中。它簡潔、易用且功能強大，支持多種請(qing)求(qiu)(qiu)類型（GET、POST、PUT、DELETE 等），能夠(gou)自動轉換請(qing)求(qiu)(qiu)和(he)響應數據（如JSON數據），并且提供了攔截請(qing)求(qiu)(qiu)和(he)響應、取(qu)消(xiao)請(qing)求(qiu)(qiu)、配置默認參數等多種功能，使得在(zai)進(jin)行 AJAX 請(qing)求(qiu)(qiu)時更加便捷和(he)高效(xiao)。

一、發送get請求

不多說了，直接(jie)實戰示例：

const axios = require('axios');// Make a request for a user with a given IDaxios.get('/user?ID=12345')
  .then(function (response) {    // handle success    console.log(response);
  })
  .catch(function (error) {    // handle error    console.log(error);
  })
  .finally(function () {    // always executed
  });// Optionally the request above could also be done asaxios.get('/user', {    params: {      ID: 12345
    }
  })
  .then(function (response) {    console.log(response);
  })
  .catch(function (error) {    console.log(error);
  })
  .finally(function () {    // always executed
  });  

// Want to use async/await? Add the `async` keyword to your outer function/method.async function getUser() {  try {    const response = await axios.get('/user?ID=12345');    console.log(response);
  } catch (error) {    console.error(error);
  }
}

二、發送post請求

示(shi)例：

axios.post('/user', {    firstName: 'Fred',    lastName: 'Flintstone'
  })
  .then(function (response) {    console.log(response);
  })
  .catch(function (error) {    console.log(error);
  });
  
  表單作為參數：  const {data} = await axios.post('/user', document.querySelector('#my-form'), {  headers: {    'Content-Type': 'application/json'
  }
  })
  
  執行混合的請求：  function getUserAccount() {  return axios.get('/user/12345');
  }  function getUserPermissions() {    return axios.get('/user/12345/permissions');
  }  
  const [acct, perm] = await Promise.all([getUserAccount(), getUserPermissions()]);  
  // OR  
  Promise.all([getUserAccount(), getUserPermissions()])
    .then(function ([acct, perm]) {      // ...
   });
   
   
 表單文件相關：Multipart (multipart/form-data)  
 const {data} = await axios.post('//httpbin.org/post', {    firstName: 'Fred',    lastName: 'Flintstone',    orders: [1, 2, 3],    photo: document.querySelector('#fileInput').files
    }, {      headers: {        'Content-Type': 'multipart/form-data'
      }
    }
  )
  URL encoded form (application/x-www-form-urlencoded)   const {data} = await axios.post('//httpbin.org/post', {    firstName: 'Fred',    lastName: 'Flintstone',    orders: [1, 2, 3]
  }, {    headers: {        'Content-Type': 'application/x-www-form-urlencoded'
      }
    })

三、另一種寫法

代碼(ma)如下（示(shi)例）：

axios(config)// Send a POST requestaxios({  method: 'post',  url: '/user/12345',  data: {    firstName: 'Fred',    lastName: 'Flintstone'
  }
});// GET request for remote image in node.jsaxios({  method: 'get',  url: '//bit.ly/2mTM3nY',  responseType: 'stream'})  .then(function (response) {    response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
  });axios(url[, config])// Send a GET request (default method)這是最簡單的默認方式，get請求axios('/user/12345');//Request method aliases//For convenience aliases have been provided for all supported request methods. --別名axios.request(config)axios.get(url[, config])axios.delete(url[, config])axios.head(url[, config])axios.options(url[, config])axios.post(url[, data[, config]])axios.put(url[, data[, config]])axios.patch(url[, data[, config]])axios.postForm(url[, data[, config]])axios.putForm(url[, data[, config]])axios.patchForm(url[, data[, config]])

總結

Axios 因其靈活(huo)性和(he)易用(yong)性，成為了現(xian)代前端開發中非常流行的HTTP庫之一(yi)，廣泛(fan)應(ying)用(yong)于各種Web項目中。今天內容比較(jiao)多，需要(yao)大(da)量時間(jian)實(shi)戰測(ce)試和(he)體會才能熟練應(ying)用(yong)。