分享一個axios實現get請求的示例

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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章