分享一个axios实现get请求的示例

axios 实现 get 请求,这是一段很简单但很实用的代码。

2020年06月17日 14:34:27

console.log('i have a dream !')

let banner = Math.floor(Math.random() * 1000)
let api = `http://mock.xunsu.online/mock/index/get/arg/` + banner
let msg = ''

axios.get(api).then((response) => {
  if (response.data.code == 0) {
    console.log(response.data.data)
    msg = "欢迎光临!"
  } else {
    msg = "网络异常!"
  }
  alert(msg)
})

接口说明:

http://mock.xunsu.online/mock/index/get/arg/xxx

接口是在线的,代码可以不用修改直接执行。

再分享一个在线的调试示例,可以在浏览器开发者模式观察请求。

http://yixzm.cn/demo

在使用前记得引入 axios 库。

比如可以用这个库:

http://mock.xunsu.online/lib/axios/axios.min.js

引入只要在请求代码之前就可以。比如:

<script src="/lib/axios/axios.min.js"></script>

<script src="/d/demo_index.js?v=0.0.1.200426"></script>

这里,demo_index.js 是我们的业务代码,只要在这之前引入 axios 就可以。

下面贴一下网页完整的html代码,供参考


<!DOCTYPE html>
<html lang='zh-cn'>

<head>
  <title>DEMO-列表</title>
  <!-- Chasing Dreams and Encouragement Network -->
  <meta name=keywords content="弈心逐梦">
  <meta name=description content="这是一位码农师傅的个人博客站。">
  <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta http-equiv='description' content='www.yixzm.cn' />
  <meta name="baidu-site-verification" content="usAt5Y5BE2" />
  <link rel="stylesheet" type="text/css" href="/lib/layui/css/layui.css">
    <script src="/d/demo_index_lk.js?v=0.0.1.200426"></script>
    <script src="http://mock.xunsu.online/d/comment_lk.js?v=0.0.1.200426"></script>
  <link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">
  <script src="/lib/vue/vue.min.js"></script>
</head>

<body>

<div class="layui-container">

  <ul class="layui-nav" id="nav-light">
  <li class="layui-nav-item">
    <a class="href align-center" href="/" title="DEMO">
      <i class="fa fa-home fa-2x" style="color:#555;" aria-hidden="true"></i>
    </a>
  </li>
</ul>

  <div class="layui-row">
    <div
      class="layui-col-xs12 layui-col-sm10 layui-col-md8 layui-col-xs-offset0 layui-col-sm-offset1 layui-col-md-offset2">
      <blockquote class="layui-elem-quote layui-quote-nm">
        <h1>DEMO</h1>
      </blockquote>
      <ul>
                <li class="align-left">
          <a href="/demo/vcode" class="layui-nav-item layui-nav-itemed">
            <i class="fa fa-hand-o-right fa-lg" aria-hidden="true">&nbsp thinkphp6 验证码使用</i> 
          </a>
          <hr>
        </li>
                <li class="align-left">
          <a href="/demo/qrcode" class="layui-nav-item layui-nav-itemed">
            <i class="fa fa-hand-o-right fa-lg" aria-hidden="true">&nbsp 二维码接口使用示例</i> 
          </a>
          <hr>
        </li>
                <li class="align-left">
          <a href="/demo/echarts" class="layui-nav-item layui-nav-itemed">
            <i class="fa fa-hand-o-right fa-lg" aria-hidden="true">&nbsp CSDN博客发布数量统计</i> 
          </a>
          <hr>
        </li>
                <li class="align-left">
          <a href="/demo/PrivateTalk" class="layui-nav-item layui-nav-itemed">
            <i class="fa fa-hand-o-right fa-lg" aria-hidden="true">&nbsp 悄悄话</i> 
          </a>
          <hr>
        </li>
              </ul>
    </div>
  </div>

</div>

<div id="xs-comment">
    <xs-comment-index></xs-comment-index>
</div>

<script src="/lib/layui/layui.js"></script>
<script src="/lib/axios/axios.min.js"></script>
<!-- <script src="/lib/visit/baidu.js"></script> -->

<script src="/d/demo_index.js?v=0.0.1.200426"></script>
<script src="http://mock.xunsu.online/d/comment.js?v=0.0.1.200426"></script>
</body>

</html>
版权声明

弈心博客


本文首发site_name,转载请附上博文链接!