【vue学习】4.axios学习使用

最新推荐文章于 2023-08-07 21:47:43 发布

Swingzzz

最新推荐文章于 2023-08-07 21:47:43 发布

阅读量189

点赞数

分类专栏： Vue学习文章标签： js ajax vue

本文链接：https://blog.youkuaiyun.com/weixin_41908867/article/details/108830815

版权

Vue学习专栏收录该内容

14 篇文章

订阅专栏

本文主要介绍在Vue学习中关于Axios的基础知识，包括Axios的定义和如何进行get、post请求的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【vue学习】4.axios学习使用

axios 基础

Q: 什么是 axios？

A: Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

使用：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

get、post 请求学习

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="button" value="get请求" class="get" />
    <input type="button" value="post请求" class="post" />
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>
        /*
    接口1:随机笑话
    请求地址:https://autumnfish.cn/api/joke/list
    请求方法:get
    请求参数:num(笑话条数,数字)
    响应内容:随机笑话
        */
        document.querySelector(".get").onclick = function(){
            axios.get("https://autumnfish.cn/api/joke/list?num=3").then(function (response){
                console.log(response);
            })
        }

        /*
     接口2:用户注册
     请求地址:https://autumnfish.cn/api/user/reg
     请求方法:post
     请求参数:username(用户名,字符串)
     响应内容:注册成功或失败
        */
        document.querySelector(".post").onclick = function(){
            axios.post("https://autumnfish.cn/api/user/reg",
                {username:"jack4649498413"}
            ).then(function (response){
                console.log(response);
            },function (err){
                console.log(err);
            })
        }
    </script>
</body>
</html>