草庐IT

day08-Axios

liyuelian 2023-03-28 原文

Axios

1.基本说明

  • Axios是一个基于promise的网络请求库,作用于node.js和浏览器中。它是 isomorphic 的 (即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http 模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。

    1. axios是独立于vue的一个项目,不是vue的一部分
    2. axios通常和Vue一起使用,实现ajax操作
    3. Axios是一个基于promise的HTTP库
  • 学习文档:https://javasoho.com/axios/

  • Axios库文件:

    1. 使用axios需要引入axios库文件

    2. 可以直接引入

      <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
      
    3. 也可以下载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>
<!--页面视图-->
<div id="app">
    <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>
</div>
<script src="vue.js"></script>
<script src="axios.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "妖怪信息列表",
            monsterList: []//表示妖怪信息的数组
        },
        methods: {//自定义方法
            list() {//发出ajax请求,获取数据-axios
                /*
                  1.axios.get()表示发出一个ajax请求
                  2."http://localhost:63342/axios/data/response.data.json" 表示请求的url
                     根据实际情况填写
                  3.axios发出ajax请求的基本语法是
                       axios.get(url).then(箭头函数).then(箭头函数)...catch(箭头函数)
                       (1)如果get请求成功后,就进入第一个then()
                       (2)可以在第一个then()中继续发出ajax请求(和promise基本一致)
                       (3)如果有异常,会进入到catch(箭头函数)中处理
                  4.list方法在生命周期函数created()中调用比较好
                  (这个阶段的data和 methods已经初始化结束,可以访问,但dom结构未初始化,页面未渲染)
                 */
                axios.get("http://localhost:63342/axios/data/response.data.json")
                    .then(responseDate => {//如果发出的ajax请求成功后,就会执行then()的箭头函数
                        // console.log("responseDate=>", responseDate);
                        // console.log("responseDate.data=>", responseDate.data);
                        // console.log("responseDate.data.data=>", responseDate.data.data);
                        console.log("responseDate.data.data.items=>", responseDate.data.data.items);
                        //将妖怪列表数据信息,绑定到data数据池
                        this.monsterList = responseDate.data.data.items;

                        //可以再次发出ajax请求,和promise一样,例如:
                        return axios.get("http://localhost:63342/axios/data/response.data.json");
                    }).then(responseData2 => {
                    console.log("第二次axios发出ajax请求返回数据responseData2=>", responseData2);
                    }).catch(err => {
                    console.log("err=>", err);
                    })//这里可以再次发出
            }
        },
        created() {//list方法在生命周期函数created()中调用比较好
            this.list();
        }
    })
</script>
</body>
</html>

responseDate.data.data.items的原生数据格式如下:

效果:

3.注意事项和使用细节

将JSON对象转成JSON.stringify(response),格式输出JSON字符串,可以方便观察分析json字符串结构

例如:

控制台输出:

只需要复制字符串,在一些json转换网站中就可以看到json字符串清晰的结构

有关day08-Axios的更多相关文章

  1. ruby-on-rails - rails : Find tasks that were created on a certain day? - 2

    我有一个任务列表(名称、starts_at),我试图在每日View中显示它们(就像iCal)。deftodays_tasks(day)Task.find(:all,:conditions=>["starts_atbetween?and?",day.beginning,day.ending]end我不知道如何将Time.now(例如“2009-04-1210:00:00”)动态转换为一天的开始(和结束),以便进行比较。 最佳答案 deftodays_tasks(now=Time.now)Task.find(:all,:conditio

  2. 什么是0day漏洞?如何预防0day攻击? - 2

    什么是0day漏洞?0day漏洞,是指已经被发现,但是还未被公开,同时官方还没有相关补丁的漏洞;通俗的讲,就是除了黑客,没人知道他的存在,其往往具有很大的突发性、破坏性、致命性。0day漏洞之所以称为0day,正是因为其补丁永远晚于攻击。所以攻击者利用0day漏洞攻击的成功率极高,往往可以达到目的并全身而退,而防守方却一无所知,只有在漏洞公布之后,才后知后觉,却为时已晚。“后知后觉、反应迟钝”就是当前安全防护面对0day攻击的真实写照!为了方便大家理解,中科三方为大家梳理当前安全防护模式下,一个漏洞从发现到解决的三个时间节点:T0:此时漏洞即0day漏洞,是已经被发现,还未被公开,官方还没有相

  3. ruby - Rails 比较 date.end_of_day.to_datetime 和 date.to_datetime.end_of_day 返回的日期对象值时返回 false - 2

    ruby1.9.3dev(2011-09-23修订版33323)[i686-linux]轨道3.0.20最近为什么在与DateTimeonRails相关的RSpecs项目上工作我发现在给定日期以下语句发出的值date.end_of_day.to_datetime和date.to_datetime.end_of_day虽然它们表示相同的日期时间,但比较时返回false。为了确认这一点,我打开了Rails控制台并尝试了以下操作1.9.3dev:053>monday=Time.now.monday=>2013-02-2500:00:00+05301.9.3dev:054>monday.cla

  4. Ruby,从 Date.day_fraction_to_time 获取小时、秒和时间 - 2

    我找到了这个方法here.start=DateTime.nowsleep15stop=DateTime.now#minutesputs((stop-start)*24*60).to_ihours,minutes,seconds,frac=Date.day_fraction_to_time(stop-start)我有以下错误:`':privatemethod`day_fraction_to_time'calledforDate:Class(NoMethodError)我检查了/usr/lib/ruby/1.9.1/date.rb并找到了它:defday_fraction_to_time(

  5. AT24C04、AT24C08、AT24C16系列EEPROM芯片单片机读写驱动程序 - 2

    一、概述在之前的一篇博文中,记录了AT24C01、AT24C02芯片的读写驱动,先将之前的相关文章include一下:1.IIC驱动:4位数码管显示模块TM1637芯片C语言驱动程序2.AT24C01/AT24C02读写:AT24C01/AT24C02系列EEPROM芯片单片机读写驱动程序本文记录分享AT24C04、AT24C08、AT24C16芯片的单片机C语言读写驱动程序。二、芯片对比介绍型号容量bit容量byte页数字节/页器件寻址位可寻址器件数WordAddress位数/字节数备注AT24C044k5123216A2A149/1WordAddress使用P0位AT24C088k1024

  6. Ruby strftime : Day without leading zero, %e 不工作 - 2

    我正在尝试用没有前导零的日期来格式化日期使用%d它工作正常,但前导零date_time.strftime("%d/%m/%y")result:04/01/11我搜索了一下,发现我应该使用%e而不是%d,但是执行以下操作会得到一个空字符串。date_time.strftime("%e/%m/%y")result:这跟Ruby的版本有关系吗?我在Windows机器上使用v1.8.7。更重要的是,是否有另一种方法可以在没有前导零的情况下完成一天(比gsub更方便)? 最佳答案 如果你想删除月份或日期的前导零,只需在格式前添加一个减号,如下

  7. ruby-on-rails - Rails : Date. 今天 - 1.day - 2

    使用rails控制台,我只是被这个咬住了:假设今天是12月11日。Date.today-1.day#December10(nospaces)Date.today-1.day#December10(aspaceonbothsidesoftheminussign)Date.today-1.day#December11whaaaat?Date.today-5.days#Stilldecember11!有人能解释一下这是怎么回事吗?我有点担心这在代码中很容易被遗漏。关于如何对此进行编码还有其他建议吗? 最佳答案 您看到的差异是由ruby​​

  8. day1-数组part01| 704. 二分查找、27. 移除元素 - 2

    数组理论基础数组是存放在连续内存空间上的相同类型数据的集合。数组下标从0开始数组内存空间的地址是连续的c++中vector和array的区别1、vector是顺序容器,其利用连续的内存空间来存储元素,但是其内存空间大小是能够改变的。2、array是顺序容器,其也是利用连续的内存空间来存储元素,但它的内存空间是固定大小的,申请之后就无法改变。3、vector的底层是array实现的二维数组二维数组在内存的空间地址是连续的704|二分查找思路1、把整个数组一分为二;2、判断目标值在左区间还是右区间,若在左区间,则修改右区间指针的位置;若在右区间,则修改新区间的左区间位置3、重复上述过程,直到lef

  9. day44|● 完全背包● 518. 零钱兑换 II ● 377. 组合总和 Ⅳ - 2

    518.零钱兑换II1.代码classSolution{public:intchange(intamount,vector&coins){vectorf(amount+1,0);f[0]=1;for(inti=0;i2.动规五部曲1.确定dp数组和其下标含义由题目说可知求选择钱票得到总和为target的方案数,dp[j]相当于选择物品体积相加为i的方案数2.递推公式每次加入物品,都有可能到达体积j,所以在每次加上这个物品到达j时加上这个方案数f[j]+=f[j-coins[i]];3.初始化因为在for循环和dp公式中没有确切的值,肯定需要初始化,初始化第一个就可以保证后面的推导出来了,f[0

  10. ruby-on-rails - Rails 时间奇数 : "x days from now" - 2

    当用户注册到我的网站之一进行免费试用时,我将他们的帐户到期时间设置为“14.days.from_now”。然后在主页上我显示他们还剩多少天,这是我得到的:(user.trial_expires-Time.now)/86400(因为一天有86400秒,即60*60*24)有趣的是,结果超过14,因此四舍五入为15。在控制台中进行更仔细的调查后,这种情况只会在未来两天发生(如果您明白我的意思)。例如>>Time.now=>FriOct2911:09:2601002010>>future_1_day=1.day.from_now=>Sat,30Oct201011:09:27BST01:00#

随机推荐