Axios的使用

最新推荐文章于 2025-05-23 19:56:09 发布

杜小姐-

最新推荐文章于 2025-05-23 19:56:09 发布

阅读量366

点赞数 1

分类专栏： axios 文章标签：前端

本文链接：https://blog.youkuaiyun.com/tianxingege_/article/details/119710942

版权

axios 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了Axios，一个广泛用于浏览器和Node.js的HTTP库，通过实例展示了如何使用get和post方法进行API请求，包括随机笑话获取和用户注册操作。同时涵盖了Axios的基本用法和常见别名方法的使用方式。

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

一、什么是 axios？

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

二、引入方式

使用： npm install axios
使用：bower install axios
使用： cdn

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

三、案例

使用get方法

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

 <!-- 官网提供的 axios 在线地址 -->
    <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 () {
           // 用get请求地址
            axios.get("https://autumnfish.cn/api/joke/list?num=6")
            .then(function (response) {
                console.log(response);
              },function(err){
                  console.log(err);
              })
        }

使用post方法

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

    </script>