发布于 / 更新于 / axios / 热度 0 / 喜欢 0

vue-axios的get请求个post请求

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中，能够拦截请求和响应，能转换请求与响应数据，能取消请求，自动转换Json格式，浏览器端支持CSRF(跨域请求)

一、单纯的axios请求

1、get请求

直接简单的用script引入axios库，然后编写axios的get请求，get请求参数为字符串，然后在浏览器进入开发者模式查看效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<html>
<head>
   	<meta charset="utf-8" />
  	<title>axios</title>
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0-0/axios.min.js"></script>

</head>



<body>

  <input type="button" value="get请求" class="get" />

  <input type="button" value="post请求" class="post" />



    <script>

​    /*

​    接口1：http://musicapi.leanapp.cn/search/suggest

​    请求方法：get

​    参数：keywords

​    响应：歌曲名称

​    */

​    document.querySelector('.get').onclick = function () {

​      axios

​        .get("http://musicapi.leanapp.cn/search/suggest?keywords='爱'")

​        .then(

​          function (response) {

​            console.log(response)

​          },

​          function (err) {

​            console.log(err)

​          }

​        )

​    }
   </script>
 </body>
</html>

点击get请求，请求成功返回数据

img

修改url，发出错误请求后会执行function(err)执行计划好的逻辑。

img

2、post请求

同样的编写post请求函数，使用一个用户注册接口进行学习。post请求所携带参数为对象形式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*
        接口2：用户注册
        请求地址：https://autumnfish.cn/api/user/reg
        请求方法：post
        请求参数：username(用户民，字符串)
        响应内容：注册成功或失败
        */
        document.querySelector(".post").onclick = function () {
            axios.post("https://autumnfish.cn/api/user/reg", {
                    username: "jack"
                })
                .then(function (response) {
                    console.log(response);
                }, function (err) {
                    console.log(err)
                })
        }

img

img

二、结合axios+vue

同样简单的用script映入axios和vue.js。

因为二者没有相互依赖关系，所以先后顺序可以不用考虑。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>axios</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0-0/axios.min.js"></script>
</head>

<body>
    <div id="app">
        <input type="button" value="获取歌名" @click=getName>
        <p> {{name}} </p>
    </div>
    <script>
        /*
        接口1：http://musicapi.leanapp.cn/search/suggest
        请求方法：get
        参数：keywords
        响应：歌曲名称
        */
        var app = new Vue({
            el: "#app",
            data: {
                name: "歌名"
            },
            methods: {
                getName: function () {
                    var that = this; //保存this
                    axios.get("http://musicapi.leanapp.cn/search/suggest?keywords='爱'").then(function (
                        response) {
                        console.log.response //输出返回的信息
                        console.log(response.data.result.songs[0].name); //选择第一首歌曲名
                        that.name = response.data.result.songs[0].name; //将歌曲名赋值给外面的this
                    }, function (err) {
                        console.log(err)
                    })
                }
            }
        })
    </script>
</body>
</html>

img

点击获取歌名按钮

img

相关文章
评论
返回顶部
  • vuex基本使用

    vuex学习 简介​ vuex是专门用来管理vue.js应用程序中状态的一个插件。他的作用是将应用中的所有状态都放在一起，集中式来管理。这里所说的状态指的是vue组件中data里面的属性。 vuex组成结构示意图​ ...

    vuex基本使用
  • antd输入文本域样式

    a-textarea文本域样式问题 当时开发遇到一个问题，使用antd的a-textarea的时候宽度定义不了，进一步排查发现a-textarea标签antd框架那边已经对这个样式做了约束，所以一般的加style改不了，转而...

    antd输入文本域样式
  • springboot连接mysql(Access)错误

    SpringBoot连接MySQL时遇到ERROR 1045 (28000): Access denied for user ‘root‘@’localhost’ (using password: YES) 在yml配置文件...

    springboot连接mysql(Access)错误
  • FirstLove

    FirstLove ​ ​ 你总有一天要跟所有的记忆相安无事握手言和，那里面有她也有你，有她的青春也有你的年华。那个人永远活在时间里了，你把她拉不出来，自己也回不去，就这样吧，让她安静的留在那里...

    FirstLove
  • 侠客行

    侠客行 赵客缦胡缨，吴钩霜月民。 银鞍照白马，飒沓如流星。 十步杀一人，千里不留行。 事了拂衣去，深藏功与名。 闲过信陵饮，脱剑膝前横。 将炙啖朱亥，持觞劝侯嬴。 三杯吐然诺，五岳倒为轻。 眼花耳热后，...

    侠客行
  • 毕业感想
  • 可爱的小马

    可爱的小马 小套路，感谢陈同学的配合，可惜陈同学好像不喜欢（无奈～ 要图片可以私信，哈哈哈！！！

    可爱的小马
  • 从ssr到v2ray

    从ssr到v2ray(ubuntu 18.04) ​ 事件起因是因为用shadowsocks被封得太平常了，记得那天晚上我改一个端口就被封一个，无奈之下转到v2ray。 其中要做好准备工作。 1、申请域名。因为...

    从ssr到v2ray
  • 山川异域，风月同天

    山川异域，风月同天 1一個國度的山川，不可能跑到另一個國度。而天上的風月，則不受此拘限，不同國度的人可以共見

    山川异域，风月同天
  • 突变

    突变 1突变是以闪电和雷鸣的方式入侵的，像一颗子弹撞到胸口上炸开，爆炸带来的瞬间的压力从心脏传到每一根毛细血管，全身的细胞都停止住代谢和思考，仔细的聆听这一刹那的震荡。没有任何力量可以挽留住心，它只向无底深渊的黑暗更深处下坠...

    突变
ESC