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

day08-Axios

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库文件
[*]可以直接引入

[*]也可以下载axios.min.js，然后在本地引入
访问上面的地址，另存为js文件即可


2.应用实例

在Vue项目中使用axios，从服务器获取json数据，显示在页面
为了简化，使用json文件来模拟后端交互的数据
1.response.data.json：
{
"success": true,
"message": "成功",
"data": {
    "items": [
      {
      "name": "牛魔王",
      "age": 800
      },
      {
      "name": "红孩儿",
      "age": 500
      },
      {
      "name": "蜈蚣精",
      "age": 200
      }
    ]
}
}2.在项目中导入vue.js和axios.min.js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios的应用实例</title>
</head>
<body>


    <h1>{{msg}}</h1>
    <table border="1px" width="200px">
      <tr>
            <td>名字</td>
            <td>年龄</td>
      </tr>
      <tr v-for="monster in monsterList">
            <td>{{monster.name}}</td>
            <td>{{monster.age}}</td>
      </tr>
    </table>




</body>
</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】 我们会及时删除侵权内容，谢谢合作！
页: [1]
查看完整版本: day08-Axios