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">  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">  二維碼接口使用示例</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">  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">  悄悄話</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>