day08-Axios

在你左边 · 发表于 2023-1-12 20:52:40

Axios

1.基本说明

Axios是一个基于promise的网络请求库，作用于node.js和浏览器中。它是 isomorphic 的 (即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http 模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。
- axios是独立于vue的一个项目，不是vue的一部分
- axios通常和Vue一起使用，实现ajax操作
- Axios是一个基于promise的HTTP库
学习文档：https://javasoho.com/axios/
Axios库文件：
- 使用axios需要引入axios库文件
- 可以直接引入
  1. [/code]
  2. [*]也可以下载axios.min.js，然后在本地引入
  3. [indent]访问上面的地址，另存为js文件即可
  4. [/indent]
  5. [/list]
  6. [/list][size=5]2.应用实例[/size]
  8. 在Vue项目中使用axios，从服务器获取json数据，显示在页面
  9. [align=center][/align][indent]为了简化，使用json文件来模拟后端交互的数据
  10. [/indent]1.response.data.json：
  11. [code]{
  12. "success": true,
  13. "message": "成功",
  14. "data": {
  15. "items": [
  16. {
  17. "name": "牛魔王",
  18. "age": 800
  19. },
  20. {
  21. "name": "红孩儿",
  22. "age": 500
  23. },
  24. {
  25. "name": "蜈蚣精",
  26. "age": 200
  27. }
  28. ]
  29. }
  30. }
  复制代码
  2.在项目中导入vue.js和axios.min.js
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>axios的应用实例</title>
  6. </head>
  7. <body>
  10. <h1>{{msg}}</h1>
  11. <table border="1px" width="200px">
  12. <tr>
  13. <td>名字</td>
  14. <td>年龄</td>
  15. </tr>
  16. <tr v-for="monster in monsterList">
  17. <td>{{monster.name}}</td>
  18. <td>{{monster.age}}</td>
  19. </tr>
  20. </table>
  25. </body>
  26. </html>
  复制代码
  responseDate.data.data.items的原生数据格式如下：
  
  效果：
  
  3.注意事项和使用细节
  
  将JSON对象转成JSON.stringify(response)，格式输出JSON字符串，可以方便观察分析json字符串结构
  例如：
  
  控制台输出：
  
  只需要复制字符串，在一些json转换网站中就可以看到json字符串清晰的结构
  
  来源:https://www.cnblogs.com/liyuelian/p/17047825.html
  免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】我们会及时删除侵权内容，谢谢合作！

day08-Axios

本帖子中包含更多资源