axios的使用

最新推荐文章于 2023-08-16 08:58:28 发布

兔子猫猫

最新推荐文章于 2023-08-16 08:58:28 发布

阅读量4.9k

点赞数

分类专栏：笔记 axios 文章标签： 1024程序员节前端 node.js

本文链接：https://blog.csdn.net/weixin_46234680/article/details/121424849

版权

笔记同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

axios

1 篇文章 0 订阅

订阅专栏

axios的使用

1.node.js 的安装
- json server 的安装
- json server的使用
2.axios的使用
3.resquest 的使用

1.node.js 的安装

Node.js官网下载

1.Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。

在这里插入图片描述
根据自己系统选择下载，之后就是一直下一步就完成了

查看是否安装成功
在这里插入图片描述
这样就安装成功了

json server 的安装

JsonServer主要的作用就是搭建本地的数据接口，创建json文件，便于调试调用

执行代码：

npm install -g json-server

检查安装是否成功：
在这里插入图片描述

json server的使用

1.创建一个文件名为 db.json 的文件

{
          "posts": [
            { "id": 1, "title": "json-server", "author": "typicode" }
          ],
          "comments": [
            { "id": 1, "body": "some comment", "postId": 1 }
          ],
          "profile": { "name": "typicode" }
        }

2.启动 json server

json-server db.json

在这里插入图片描述
这样就是启动成功
3.关闭 json-server
在控制台里面输入ctrl+c再点击y就可以了

2.axios的使用

使用 jsDelivr CDN:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

1.get请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <button>发送请求</button>
</div>
<script>
    //获取按钮
    const btn = document.querySelectorAll('button');
    //第一个按钮 按钮点击事件
    btn[0].onclick = function () {
        axios({
            //请求类型 默认请求
            method: 'get',
            url: ' http://localhost:3000/posts/'
        }).then(response => {
            console.log(response.data)
        })
    }
</script>
</body>
</html>

1、点击按钮后获得一个json 数据
在这里插入图片描述
2、再打开db.json

和这里面的数据是一样的

2.post请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <button>post请求</button>
</div>
<script>
    //获取按钮
    const btn = document.querySelectorAll('button');
    //第一个按钮 按钮点击事件
    btn[0].onclick = function () {
        axios({
            //请求类型 默认请求
            method: 'post',
            url: ' http://localhost:3000/posts/',
            //设置一个请求体
            data:{
                "title": "学习axios的第一天",
                "author": "若离"
            }
        }).then(response => {
            console.log(response.data)
        })
    }
</script>
</body>
</html>

1.点击按钮后查看控制台
在这里插入图片描述
2.查看db.json

里面是添加了一条新的数据的

3.put请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <button>put请求</button>
</div>
<script>
    //获取按钮
    const btn = document.querySelectorAll('button');
    //第一个按钮 按钮点击事件
    btn[0].onclick = function () {
        axios({
            //请求类型 默认请求
            method: 'put',
            url: ' http://localhost:3000/posts/2',
            //设置一个请求体
            data:{
                "title": "学习axios的第一天",
                "author": "蔡志强"
            }
        }).then(response => {
            console.log(response.data)
        })
    }
</script>
</body>
</html>

在这里插入图片描述
2.查看db.json数据

数据没有添加，但是内容已经更改

4.delete请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <button>delete请求</button>
</div>
<script>
    //获取按钮
    const btn = document.querySelectorAll('button');
    //第一个按钮 按钮点击事件
    btn[0].onclick = function () {
        axios({
            //请求类型 默认请求
            method: 'put',
            url: ' http://localhost:3000/posts/2',
        }).then(response => {
            console.log(response.data)
        })
    }
</script>
</body>
</html>

在这里插入图片描述
查看db.json

3.resquest 的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <button>delete请求</button>
</div>
<script>
    //获取按钮
    const btn = document.querySelectorAll('button');
    //第一个按钮 按钮点击事件
    btn[0].onclick = function () {
        axios.request({
            method:'get',
            url:' http://localhost:3000/posts'
        }).then(response=>{
            console.log(response.data);
        })
    }
</script>
</body>
</html>

请求的方法和上面也是一样的

兔子猫猫

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
3
评论
axios的使用

axios的使用1.node.js 的安装json server 的安装json server的使用2.axios的使用1.get请求2.post请求3.put请求4.delete请求3.resquest 的使用1.node.js 的安装Node.js官网下载1.Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。根据自己系统选择下载，之后就是一直下一步就完成了查看是否安装成功这样就安装成功了json server 的安装JsonServer主要
复制链接

扫一扫