axios起步——介绍和使用 post请求

场景复现

最近学习与前端相关的小程序时，接触了异步请求api的封装和实现，涉及到了很多底层的基础知识，比如ajax和axios工具，因此计划用两个专栏来系统的学习关于axios和ajax的实用知识。

核心干货

🔥🔥🔥axios官方中文文档：https://axios-http.com/zh/
🔥🔥🔥ajax文档：https://www.runoob.com/ajax/ajax-tutorial.html

axios简介

axios是什么？

• Axios是目前最流行的ajax封装库，能够很方便地实现ajax请求的快速发送。
• Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。
• 在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

axios特性

• 从浏览器发出 XMLHttpRequests请求。
• 从 node.js 发出 http 请求。
• 支持 Promise API。
• 能拦截请求和响应。
• 能转换请求和响应数据。
• 取消请求。
• 实现JSON数据的自动转换。
• 客户端支持防止 XSRF攻击。

axios安装

推荐安装node.js，使用npm包进行安装。
使用 npm:

$ npm install axios

使用 bower:

$ bower install axios

使用 yarn:

$ yarn add axios

使用 jsDelivr CDN:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

使用 unpkg CDN:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

axios基本用例

首先，我们需要注意CommonJS的用法，为了在CommonJS中使用 require() 导入时获得TypeScript类型推断（智能感知/自动完成），请使用以下方法：👇👇

const axios = require('axios').default;
// axios.<method> 能够提供自动完成和参数类型推断功能

发起一个GET请求

const axios = require('axios');

// 向给定ID的用户发起请求
axios.get('/user?ID=12345')
  .then(function (response) {
   
    // 处理成功情况
    console.log(response);
  })
  .catch(function (error) {
   
    // 处理错误情况
    console.log(error);
  })
  .finally(function () {
   
    // 总是会执行
  });

// 上述请求也可以按以下方式完成（可选）
axios.get('/user', {
   
    params: {
   
      ID: 12345
    }
  })
  .then(function (response) {
   
    console.log(response);
  })
  .catch(function (error) {
   
    console.log(error);
  })
  .finally(function () {
   
    // 总是会执行
  });  

// 支持async/await用法
async function getUser()