• axios的基本特性用法

    1. axios的基本特性

    axios 是一个基于Promise用于浏览器和node.js的HTTP客户端。

    它具有以下特征：

    • 支持浏览器和node.js
    • 支持promiseAPI
    • 自动转换JSON数据
    • 能拦截请求和响应请求
    • 转换请求数据和响应数据（请求是可以加密，在返回时也可进行解密）
    2. axios的基本用法
    1. //客户端请求
    2. axios.get('http://localhost:3000/adata')
    3.         .then(ret =>{
    4.             //data属性名称是固定的，用于获取后台响应的数据
    5.             console.log(ret.data)
    6.         })
    7. //服务器端响应
    8. app.get('/adata', (req, res) => {
    9.   res.send('Hello axios!')
    10. })
    • 服务器端响应的是ret对象
    • data属性是我们需要的数据，获取方法：ret.data(对象.属性名)
    3. axios的常用API
    • get：查询数据
    • post：添加数据
    • put：修改数据
    • delete：删除数据
    4. axios的参数传递🔥
    4.1 get传递参数
    第一种方式

    • 通过URL传递参数

      • 1. 传统url地址 通过?传参
      1. //客户端请求
      2. <body>
      3.   <script type="text/javascript" src="js/axios.js"></script>
      4.   <script type="text/javascript">
      5.     //axios get传统url地址请求传参
      6.     axios.get('http://localhost:3000/axios?id=123')
      7.       .then(function (ret) {
      8.         console.log(ret.data)
      9.       })
      10.   </script>
      11. </body>
      12. //服务器响应
      13. app.get('/axios', (req, res) => {
      14.   res.send('axios get 传递参数' + req.query.id)
      15. })
    • 2. 通过restful形式的url（用params接收参数）
    1. //客户端请求
    2. <body>
    3.   <script type="text/javascript" src="js/axios.js"></script>
    4.   <script type="text/javascript">
    5.     //axios getrestful形式的url请求传参
    6.     axios.get('http://localhost:3000/axios/456').then(function(ret){
    7.       console.log(ret.data)
    8.     })
    9.   </script>
    10. </body>
    11. //服务器响应
    12. app.get('/axios/:id', (req, res) => {
    13.   res.send('axios get (Restful) 传递参数' + req.params.id)
    14. })
    第二种方式
    • 通过params选项传递参数（比较方便，传递多个参数的 时候）
    1. //客户端请求
    2. <body>
    3.   <script type="text/javascript" src="js/axios.js"></script>
    4.   <script type="text/javascript">
    5.     //axios get通过params选项传递参数
    6.     axios.get('http://localhost:3000/axios', {
    7.       params: {
    8.         id: 789
    9.       }
    10.     }).then(function (ret) {
    11.       console.log(ret.data)
    12.     })
    13.   </script>
    14. </body>
    15. //服务器响应
    16. app.get('/axios', (req, res) => {
    17.   res.send('axios get 传递参数' + req.query.id)
    18. })
    4.2 delete传递参数

    参数传递方式和get相似（两种）

    • 通过url地址传参
      • 传统url地址 通过？传参
      • restful形式的url（用params接收参数）
    • 通过params（用query接收参数）
    4.3 post传递参数
    第一种方式
    • 通过选项传递参数（默认传递的是json格式的数据）

    1. //客户端请求
    2. <body>
    3.   <script type="text/javascript" src="js/axios.js"></script>
    4.   <script type="text/javascript">
    5.     //axios post传递参数
    6.     axios.post('http://localhost:3000/axios', {
    7.       uname: 'xuhui那束光',
    8.       pwd: 123
    9.     }).then(function (ret) {
    10.       console.log(ret.data)
    11.     })
    12.   </script>
    13. </body>
    14. //服务器响应
    15. app.post('/axios', (req, res) => {
    16.   res.send('axios post 传递参数' + req.body.uname + '---' + req.body.pwd)
    17. })
    • 提交的数据格式是JSON形式，需要服务器端提供JSON支持🔥
    1. //服务器端支持
    2. app.use(bodyParser.json());
    第二种方式
    • 通过URLsearchParams传递参数（application/x-www-for,-urlencoded）
    1. //客户端请求
    2. <body>
    3.   <script type="text/javascript" src="js/axios.js"></script>
    4.   <script type="text/javascript">
    5.     //axios post传递参数
    6.     var params = new URLSearchParams();
    7.     params.append('uname', 'xuhui那束光');
    8.     params.append('pwd', '5555');
    9.     axios.post('http://localhost:3000/axios', params).then(function(ret){
    10.       console.log(ret.data)
    11.     })
    12.   </script>
    13. </body>
    14. //服务器响应
    15. app.post('/axios/:id', (req, res) => {
    16.   res.send('axios put 传递参数' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd)
    17. })
    • 提交的数据格式为字符串形式
    4.4 put传递参数

    参数传递方式与post相似（选项传参和URLsearchParams传参）

    1. //客户端请求
    2. <body>
    3.   <script type="text/javascript" src="js/axios.js"></script>
    4.   <script type="text/javascript">
    5.     //axios put 请求传参
    6.     axios.put('http://localhost:3000/axios/123', {
    7.       uname: 'xuhui那束光',
    8.       pwd: 123
    9.     }).then(function (ret) {
    10.       console.log(ret.data)
    11.     })
    12.   </script>
    13. </body>
    14. //服务器响应
    15. app.put('/axios/:id', (req, res) => {
    16.   res.send('axios put 传递参数' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd)
    17. })
    5.axios的响应结果

    响应结果的主要属性：

    • data：实际响应回来的数据
    • headers：响应头信息
    • status：响应状态码
    • statusText：响应状态信息

    1. axios.get('http://localhost:3000/axios').then(function (ret) {
    2.       console.log(ret)
    3. })
    • data绝大多数场景返回来的是JSON形式的数据🔥
    1. //向服务器请求JSON接口
    2. axios.get('http://localhost:3000/axios-json').then(function (ret) {
    3.       console.log(ret.data.uname)
    4. })
    5. //服务器端准备一个JSON接口
    6. app.get('/axios-json', (req, res) => {
    7.   res.json({
    8.     uname: 'xuhui',
    9.     age: 12
    10.   });
    11. })
    • data是大对象ret里面的小对象🔥

    通过 对象.属性名(data.uname) 可以获取对应的值

    6. axios的全局配置

    在发送请求前，可以做一些配置信息

    • axios.defaults.timeout = 3000；//响应超时时间
    • axios.defaults.baseURL = 'http://localhost:3000/app'；//默认地址
    • axios.defaults.headers[ ' mytoken' ] = 'aqwerarwrqrwqr' //设置请求头
    1. 默认地址演示🔥
    1. // 配置请求的基准URL地址
    2. axios.defaults.baseURL = 'http://localhost:3000/';
    3. //向服务器请求JSON接口
    4. axios.get('axios-json').then(function (ret) {
    5.       console.log(ret.data.uname)
    6. })
    7.  
    8. //服务器端准备一个JSON接口
    9. app.get('/axios-json', (req, res) => {
    10.   res.json({
    11.     uname: 'xuhui',
    12.     age: 12
    13.   });
    14. })
    2. 设置请求头
    1. // 配置请求的基准URL地址
    2. axios.defaults.baseURL = 'http://localhost:3000/';
    3. // 配置请求头信息
    4. axios.defaults.headers['mytoken'] = 'hello';
    5. //向服务器请求JSON接口
    6. axios.get('axios-json').then(function (ret) {
    7.     console.log(ret.data.uname)
    8. })
    9.  
    10. //服务器端准备一个JSON接口
    11. app.get('/axios-json', (req, res) => {
    12.   res.json({
    13.     uname: 'xuhui',
    14.     age: 12
    15.   });
    16. })
    • 对于跨域请求来说，请求头是需要后台进行配置的
    7. axios拦截器
    1.请求拦截器🔥
    • 在请求发出之前设置一些信息
    1. //axios请求拦截器
    2. axios.interceptors.request.use(function(config) {
    3.     console.log(config.url)
    4.     config.headers.mytoken = 'nihao';
    5.     return config;
    6. }, function(err){
    7.       console.log(err)
    8. })
    9. //向服务器发起请求
    10. axios.get('http://localhost:3000/adata').then(function(data){
    11.       console.log(data)
    12. })
    2.响应拦截器🔥
    • 在获取数据之前对数据做一些加工处理

    1. //axios响应拦截器
    2. axios.interceptors.response.use(function(res) {
    3.       console.log(res)
    4.       return res;
    5. }, function(err){
    6.       console.log(err)
    7. })
    8. //向服务器发起请求
    9. axios.get('http://localhost:3000/adata').then(function (data) {
    10.       console.log(data)
    11. })
    1. （25行拦截器打印的信息 res）和 （31行最终需要的数据 ） 打印的信息是完全一样的。
    2. 但是，响应拦截器res中拿到的不是具体数据
    • 在调用接口时，只关心实际的数据，不需要包装数据的对象，可以在设置拦截器内容，对接收到的数据进行处理加工🔥
    • 最后拿到的data是经过响应拦截器处理后的数据
    • 注：文中部分内容来源于网络，联系侵删
  • 相关阅读:
    Pointnet/Pointnet++点云数据集处理并训练
    PayPal面经
    react+IntersectionObserver实现页面丝滑帧动画
    Mac M1芯片启动项目时出现 no zstd-jni in java.library.path 问题排查
    Medium: 9 Important Things to Remember for AB Test
    STM32FATFS文件系统移植
    【模板】2-SAT
    ISO16000-9建筑产品和家具中挥发性有机物的测试
    Linux调试器-gdb使用
    将轨迹显示到卫星地图上
  • 原文地址：https://blog.csdn.net/hymuuuu/article/details/136261257