分享一个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">  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>
上一篇： Oracle复制表结构及数据
下一篇： PHP正则式PCRE