axios(ajax请求库)

于 2024-07-19 10:28:21 发布
阅读量150 收藏 1
点赞数 3
文章标签： ajax 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guai_guai_guai/article/details/140533729
版权

json-server(搭建http服务)

json-server用来快速搭建模拟的REST API的工具包

使用json-server

  • 下载：npm install -g json-server
  • 创建数据库json文件：db.json
  • 开启服务：json-srver --watch db.json

axios的基本使用

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>axios基本使用</title>
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
    <div class="container">
        <h2 class="page-header">基本使用</h2>
        <button class="btn btn-primary"> 发送GET请求 </button>
        <button class="btn btn-warning" > 发送POST请求 </button>
        <button class="btn btn-success"> 发送 PUT 请求 </button>
        <button class="btn btn-danger"> 发送 DELETE 请求 </button>
    </div>
    <script>
        //获取按钮
        const btns = document.querySelectorAll('button');

        //第一个
        btns[0].onclick = function(){
            //发送 AJAX 请求
            axios({
                //请求类型
                method: 'GET',
                //URL
                url: 'http://localhost:3000/posts/2',
            }).then(response => {
                console.log(response);
            });
        }

        //添加一篇新的文章
        btns[1].onclick = function(){
            //发送 AJAX 请求
            axios({
                //请求类型
                method: 'POST',
                //URL
                url: 'http://localhost:3000/posts',
                //设置请求体
                data: {
                    title: "今天天气不错, 还挺风和日丽的",
                    author: "张三"
                }
            }).then(response => {
                console.log(response);
            });
        }

        //更新数据
        btns[2].onclick = function(){
            //发送 AJAX 请求
            axios({
                //请求类型
                method: 'PUT',
                //URL
                url: 'http://localhost:3000/posts/3',
                //设置请求体
                data: {
                    title: "今天天气不错, 还挺风和日丽的",
                    author: "李四"
                }
            }).then(response => {
                console.log(response);
            });
        }

        //删除数据
        btns[3].onclick = function(){
            //发送 AJAX 请求
            axios({
                //请求类型
                method: 'delete',
                //URL
                url: 'http://localhost:3000/posts/3',
            }).then(response => {
                console.log(response);
            });
        }

    </script>
</body>

</html>

axios的其他使用

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>axios其他使用</title>
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
    <div class="container">
        <h2 class="page-header">其他使用</h2>
        <button class="btn btn-primary"> 发送GET请求 </button>
        <button class="btn btn-warning" > 发送POST请求 </button>
        <button class="btn btn-success"> 发送 PUT 请求 </button>
        <button class="btn btn-danger"> 发送 DELETE 请求 </button>
    </div>
    <script>
        //获取按钮
        const btns = document.querySelectorAll('button');

        //发送 GET 请求
        btns[0].onclick = function(){
            // axios()
            axios.request({
                method:'GET',
                url: 'http://localhost:3000/comments'
            }).then(response => {
                console.log(response);
            })
        }

        //发送 POST 请求
        btns[1].onclick = function(){
            // axios()
            axios.post(
                'http://localhost:3000/comments', 
                {
                    "body": "喜大普奔",
                    "postId": 2
                }).then(response => {
                    console.log(response);
                })
        }

        /**
         * axios({
         *      url: '/post',
         *      //  /post?a=100&b=200
         *      //  /post/a/100/b/200
         *      //  /post/a.100/b.200
         *      params: {
         *          a:100,
         *          b:200
         *      }
         * })
         * 
         * 
         *  
         */

    </script>
</body>

</html>

axios的默认配置

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>axios基本使用</title>
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
    <div class="container">
        <h2 class="page-header">基本使用</h2>
        <button class="btn btn-primary"> 发送GET请求 </button>
        <button class="btn btn-warning" > 发送POST请求 </button>
        <button class="btn btn-success"> 发送 PUT 请求 </button>
        <button class="btn btn-danger"> 发送 DELETE 请求 </button>
    </div>
    <script>
        //获取按钮
        const btns = document.querySelectorAll('button');
        //默认配置
        axios.defaults.method = 'GET';//设置默认的请求类型为 GET
        axios.defaults.baseURL = 'http://localhost:3000';//设置基础 URL
        axios.defaults.params = {id:100};
        axios.defaults.timeout = 3000;//3秒之后结果如果还没有回来就取消请求

        btns[0].onclick = function(){
            axios({
                url: '/posts'
            }).then(response => {
                console.log(response);
            })
        }

    </script>
</body>

</html>

axios创建实例对象

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>axios实例对象对象</title>
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
    <div class="container">
        <h2 class="page-header">基本使用</h2>
        <button class="btn btn-primary"> 发送GET请求 </button>
        <button class="btn btn-warning" > 发送POST请求 </button>
        <br>
    </div>
    <script>
        //获取按钮
        const btns = document.querySelectorAll('button');
        
        //创建实例对象  /getJoke
        const duanzi = axios.create({
            baseURL: 'https://api.apiopen.top',
            timeout: 2000
        });

        const another = axios.create({
            baseURL: 'https://b.com',
            timeout: 2000
        });
        //这里  duanzi 与 axios 对象的功能几近是一样的
        // duanzi({
        //     url: '/getJoke',
        // }).then(response => {
        //     console.log(response);
        // });

        duanzi.get('/getJoke').then(response => {
            console.log(response.data)
        })
    </script>
</body>

</html>

拦截器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拦截器</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
    <script>
        // Promise
        // 设置请求拦截器  config 配置对象
        axios.interceptors.request.use(function (config) {
            console.log('请求拦截器 成功 - 1号');
            //修改 config 中的参数
            config.params = {a:100};

            return config;
        }, function (error) {
            console.log('请求拦截器 失败 - 1号');
            return Promise.reject(error);
        });

        axios.interceptors.request.use(function (config) {
            console.log('请求拦截器 成功 - 2号');
            //修改 config 中的参数
            config.timeout = 2000;
            return config;
        }, function (error) {
            console.log('请求拦截器 失败 - 2号');
            return Promise.reject(error);
        });

        // 设置响应拦截器
        axios.interceptors.response.use(function (response) {
            console.log('响应拦截器 成功 1号');
            return response.data;
            // return response;
        }, function (error) {
            console.log('响应拦截器 失败 1号')
            return Promise.reject(error);
        });

        axios.interceptors.response.use(function (response) {
            console.log('响应拦截器 成功 2号')
            return response;
        }, function (error) {
            console.log('响应拦截器 失败 2号')
            return Promise.reject(error);
        });

        //发送请求
        axios({
            method: 'GET',
            url: 'http://localhost:3000/posts'
        }).then(response => {
            console.log('自定义回调处理成功的结果');
            console.log(response);
        });
    </script>   
</body>
</html>

请求取消

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>取消请求</title>
    <link crossorigin='anonymous' href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
    <div class="container">
        <h2 class="page-header">axios取消请求</h2>
        <button class="btn btn-primary"> 发送请求 </button>
        <button class="btn btn-warning" > 取消请求 </button>
    </div>
    <script>
        //获取按钮
        const btns = document.querySelectorAll('button');
        //2.声明全局变量
        let cancel = null;
        //发送请求
        btns[0].onclick = function(){
            //检测上一次的请求是否已经完成
            if(cancel !== null){
                //取消上一次的请求
                cancel();
            }
            axios({
                method: 'GET',
                url: 'http://localhost:3000/posts',
                //1. 添加配置对象的属性
                cancelToken: new axios.CancelToken(function(c){
                    //3. 将 c 的值赋值给 cancel
                    cancel = c;
                })
            }).then(response => {
                console.log(response);
                //将 cancel 的值初始化
                cancel = null;
            })
        }

        //绑定第二个事件取消请求
        btns[1].onclick = function(){
            cancel();
        }
    </script>   
</body>
</html>

guai_guai_guai
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 组件的封装之基于axios的ajax请求方法
10-18
在本篇内容中，我们将探讨如何在Vue组件中封装基于axios的Ajax请求方法，以便更高效、统一地处理网络请求。 首先，让我们了解下axios。Axios是一个基于Promise的HTTP库，它可以在浏览器和Node.js中使用。它提供了...
vue使用Axios做ajax请求详解
08-30
Vue 使用 Axios 做 Ajax 请求详解 Vue.js 是一个流行的前端框架，Axios 是一个流行的 JavaScript 库，用于发送 HTTP 请求。本文将详细介绍如何使用 Axios 在 Vue.js 项目中发送 Ajax 请求。 一、安装 Axios 要...
axios发送Ajax请求
mantou_riji的博客
05-13 1068
文章目录axios简介请求格式get请求post请求ajax请求（通用请求，既可post也可get）所有代码 axios简介 axios是一个前端Ajax的一个工具库。 axios资源 https://github.com/axios/axios axios的引入：<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js"></script> 请求格式 get请求 axios.get('url地址',{
Ajax学习：Axios发送Ajax请求
weixin_47295886的博客
12-01 380
/baseURL对路径进行简化 axios.default.baseURL='http://127.0.0.1:8000';（注意有请求头 存在两次请求 包含预检请求）在nodejs中发送请求、支持promise(ES6推出的异步编程的解决方案)、拦截器机制、数据转换、取消请求、自动转换json,安全防护。防止报警告：crossorigin="anonymous"传递url参数 params GET请求。可以使用各种方法安装:本例使用cdn。POST请求（请求体请求头设置）发送ajax请求（）
AJAX请求（axios篇）
最新发布
百赢出品，必属精品
04-15 1438
AJAX是“Asynchronous JavaScript and XML”的缩写，它是一种用于创建交互式网页应用程序的技术。AJAX允许在不重新加载整个网页的情况下，异步地向服务器发送请求并获取数据。这使得网页可以更加动态和交互性，而不会中断用户的操作。Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js环境，它可以在前端和后端进行HTTP请求。它的设计简单、易于使用，提供了丰富的功能和选项来处理HTTP请求和响应。
【Ajax】如何通过axios发起Ajax请求
m0_62360527的博客
11-14 9623
Axios是专注于网络数据请求的库，相比于原生的XMLHttpRequest对象，axios简单易用。相比于Jquery，axios更加轻量化，只专注于网络数据请求。
Vue应用axios实现Ajax请求
qq_46149597的博客
11-07 773
Vue axios的使用方式
axios异步请求库
sumatray的博客
10-18 423
axios是基于Promise的HTTP库（网络异步请求库），用来发送和处理http请求。Promise是一种异步编程解决方案通过axios异步请求可以得到Promise对象，将它返回的结果进行处理。
Ajax学习：Axios发送Ajax请求--
weixin_47295886的博客
12-01 180
Axios的通用方式：有自己的方法函数axios。
ajax请求和axios区别？
qq_42931285的博客
09-27 372
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。 简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。 ...
【Vue】Axios 网络请求库
懂得一千零一种,赋予你失败的方法！
03-22 4774
文章目录Axios 网络请求库一、Axios 简介二、Axios 下载安装三、Axios 基本使用1、Aios 的请求方式Get 请求Post 请求四、Axios & Vue案例：获取笑话五、网络应用案例1、分析步骤2、html3、main.js4、效果展示5、关键步骤解析5.1 城市参数值5.2 城市天气数据5.3 数据展示5.4 热门城市查询 Axios 网络请求库 一、Axios 简介 说到axios我们就不得不说下Ajax。在旧浏览器页面在向服务器请求数据时，因为返回的是整个页面的数..
[如何使用axios发起ajax请求?]
PURPLESWEETTTTT的博客
11-15 351
简单来说:ajax就是在js中编写代码,来获取数据的技术
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
10-17
本篇文章将详细解释如何在Vue项目中配置axios，使其在发送Ajax请求时自动携带cookie。 首先，axios在默认情况下不会自动将浏览器的cookie添加到请求头中。这是因为跨域请求（CORS）的安全策略限制，防止恶意网站...
ajax-maker：基于axios的ajax请求库（https：github.comaxiosaxios）
02-02
Ajax制作器 API import Request from 'ajax-maker' ; type CodeMap = { suc_code ?: string | number | boolean ; err_code ?: string | number ; login_code ?: string | number ; } ; type ...
vue axios同步请求解决方案
08-29
Axios 是一个流行的 JavaScript 库，用于发送 HTTP 请求。但是，Axios 不支持同步请求。因此，我们需要使用 jQuery 来实现同步请求。 使用 jQuery 实现同步请求 使用 jQuery 可以轻松地实现同步请求。下面是一个...
前端AJAX请求axios插件
05-06
前端AJAX请求axios插件
vue axios 在页面切换时中断请求方法 ajax
12-11
Vue.prototype.$ajax=axios; const CancelToken = axios.CancelToken; let cancel; let cancelAjaxText = '中断成功'; Vue.prototype.post = function(url,data,loading){ var ajax = Vue.prototype.$ajax({ ...
在Vue组件化中利用axios处理ajax请求的使用方法
08-29
下面将详细介绍在 Vue 组件化中利用 Axios 处理 Ajax 请求的使用方法。 Axios 的基本使用 首先，在使用 Axios 之前，需要在 main.js 文件中引入 Axios： ```javascript import axios from 'axios' ``` 将 Axios ...
关于vue中的ajax请求和axios包问题
08-27
总结起来，`axios`是Vue.js中进行Ajax请求的首选库，它提供了一致且强大的API，支持Promise，易于配置和扩展。无论你是新手还是经验丰富的开发者，`axios`都能帮助你轻松处理数据交互。对于初学者来说，理解如何发起...
vue axios怎么请求ajax
03-07
您好，关于vue axios请求ajax的问题，可以使用以下代码： ``` axios.get('/api/data') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); ``` 其中，`/api/data`是请求的地址，可以根据实际情况进行修改。另外，还可以使用`axios.post()`等方法进行不同类型的请求。希望能对您有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值