Vue3实战笔记（06）--- Axios 基本用法

前言

今天学习Vue官方推荐的请求工具Axios ，Axios 是一个基于 promise 的 HTTP 库，可用于浏览器和 node.js 中。它简洁、易用且功能强大，支持多种请求类型（GET、POST、PUT、DELETE 等），能够自动转换请求和响应数据（如JSON数据），并且提供了拦截请求和响应、取消请求、配置默认参数等多种功能，使得在进行 AJAX 请求时更加便捷和高效。

一、发送get请求

不多说了，直接实战示例，多看注释：

const axios = require('axios');

// Make a request for a user with a given ID
axios.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 as
axios.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请求

示例：

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('https://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('https://httpbin.org/post', {
    firstName: 'Fred',
    lastName: 'Flintstone',
    orders: [1, 2, 3]
  }, {
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    })
   

三、另一种写法

代码如下（示例）：

axios(config)
// Send a POST request
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});
// GET request for remote image in node.js
axios({
  method: 'get',
  url: 'http://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 因其灵活性和易用性，成为了现代前端开发中非常流行的HTTP库之一，广泛应用于各种Web项目中。今天内容比较多，需要大量时间实战测试和体会才能熟练应用。