欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-07-02 17:04:25
...

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

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>