使用axios发送请求

最新推荐文章于 2024-09-16 21:58:00 发布
最新推荐文章于 2024-09-16 21:58:00 发布
阅读量1.1w 收藏 39
点赞数 4
文章标签： Axios 使用axios发送请求 前端使用axios发送请求 axios发送请求 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/justry_deng/article/details/105370501
版权

声明： 本文主要是照着官网教学自己对部分知识敲了一遍，纯属动手练习，没什么技术含量；更多细节、更多功能可详见https://github.com/axios/axios。

axios发送请求的语法：

写法一(以get为例)：

axios({
    method: 'get',
    url: 'https://github.com/axios/axios',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
    //......
}).then(response => {
    // handle success
    this.resultTwo.successInfo = response.data;
}).catch(error => {
    // handle error
    this.resultTwo.failureInfo = error;
}).then(() => {
    // always executed
});

写法二(以get为例)：

axios.get('https://github.com/axios/axios', {
    params: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
}).then(response => {
    // handle success
    this.resultTwo.successInfo = response.data;
}).catch(error => {
    // handle error
    this.resultTwo.failureInfo = error;
}).then(() => {
    // always executed
});

简单示例：

提供三个可访问后端接口，以便前端进行请求测试：在这里插入图片描述

使用axios发送请求(示例)：

  • 发送GET请求：
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios发送请求</title>
    <!-- 引入vue支持 -->
    <script src="../../../node.js/repository/node_modules/vue/dist/vue.js"></script>
    <!-- 引入axios支持 -->
    <script src="../../../node.js/repository/node_modules/_axios@0.19.2@axios/dist/axios.js"></script>
    <script>
        window.onload = function () {
            let vm = new Vue({
                el: '#myId',
                data() {
                    return {
                        resultOne: {
                            successInfo: '',
                            failureInfo: ''
                        },
                        resultTwo: {
                            successInfo: '',
                            failureInfo: ''
                        }
                    }
                },
                methods: {
                    getTestOne() {
                        // 发送get请求, 参数直接手动拼接在url后面
                        axios.get('http://localhost:8080/abc?name=张三&motto=我不是黄蓉')
                            .then((response) => {
                                // handle success
                                this.resultOne.successInfo = response.data;
                            }).catch(error => {
                                // handle error
                                this.resultOne.failureInfo = error;
                            }).then(() => {
                                // always executed
                            });
                    },

                    getTestTwo() {
                        // 发送请求, 通过params拼接参数
                        axios.get('http://localhost:8080/abc', {
                            params: {
                                name: '邓沙利文',
                                motto: '我是一只小小小小鸟~嗷！嗷！'
                            }
                        }).then(response => {
                            // handle success
                            this.resultTwo.successInfo = response.data;
                        }).catch(error => {
                            // handle error
                            this.resultTwo.failureInfo = error;
                        }).then(() => {
                            // always executed
                        });
                    }
                }
            });
        }
    </script>
</head>

<body>
    <div id="myId">
        <button @click="getTestOne">axios发送get请求(测试一)</button>
        <p>{{resultOne.successInfo}}</p>
        <p>{{resultOne.failureInfo}}</p>

        <button @click="getTestTwo">axios发送get请求(测试二)</button>
        <p>{{resultTwo.successInfo}}</p>
        <p>{{resultTwo.failureInfo}}</p>
    </div>
</body>

</html>
    测试一下：
    在这里插入图片描述
  • 发送POST + JSON请求：
    提示： 默认的，axios调用post等方法时进行请求时，ContentType为application/json;charset=UTF-8。
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios发送请求</title>
    <!-- 引入vue支持 -->
    <script src="../../../node.js/repository/node_modules/vue/dist/vue.js"></script>
    <!-- 引入axios支持 -->
    <script src="../../../node.js/repository/node_modules/_axios@0.19.2@axios/dist/axios.js"></script>
    <script>
        window.onload = function () {
            let vm = new Vue({
                el: '#myId',
                data() {
                    return {
                        result: {
                            successInfo: '',
                            failureInfo: ''
                        }
                    }
                },
                methods: {
                    postJsonTest() {
                        // 发送(请求内容为json的)post请求
                        axios.post('http://localhost:8080/xyz', {
                            name: '邓沙利文',
                            age: 26
                        }).then((response) => {
                            // handle success
                            this.result.successInfo = response.data;
                        }).catch(error => {
                            // handle error
                            this.result.failureInfo = error;
                        }).then(() => {
                            // always executed
                        });
                    }
                }
            });
        }
    </script>
</head>

<body>
    <div id="myId">
        <button @click="postJsonTest">axios发送post + json请求(测试)</button>
        <p>{{result.successInfo}}</p>
        <p>{{result.failureInfo}}</p>
    </div>
</body>

</html>
    测试一下：
    在这里插入图片描述
  • 发送POST + Form表单请求：
    提示： 可以借助其它插件/类库来完成参数转换的功能。
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios发送请求</title>
    <!-- 引入vue支持 -->
    <script src="../../../node.js/repository/node_modules/vue/dist/vue.js"></script>
    <!-- 引入axios支持 -->
    <script src="../../../node.js/repository/node_modules/_axios@0.19.2@axios/dist/axios.js"></script>
    <script>
        window.onload = function () {
            let vm = new Vue({
                el: '#myId',
                data: {
                    resultOne: {
                        successInfo: '',
                        failureInfo: ''
                    },

                    resultTwo: {
                        successInfo: '',
                        failureInfo: ''
                    },

                    person: {
                        name: '邓沙利文',
                        hobby: '游戏、台球、撸代码'
                    }
                },
                methods: {
                    /*
                     * 参数本身就是形如【k1=v1&k2=v2】这样的形式
                     */
                    postJsonTestOne() {
                        // 发送(请求内容为form表单的)post请求
                        axios.post(
                            // url
                            'http://localhost:8080/qwer',
                            // data
                            'name=JustryDeng&hobby=吃海鲜'
                        ).then((response) => {
                            // handle success
                            this.resultOne.successInfo = response.data;
                        }).catch(error => {
                            // handle error
                            this.resultOne.failureInfo = error;
                        }).then(() => {
                            // always executed
                        });
                    },

                    /*
                     * 参数本身是对象，使用transformRequest将其转换为形如【k1=v1&k2=v2】这样的形式
                     */
                    postJsonTestTwo() {
                        // 发送(请求内容为form表单的)post请求
                        axios.post('http://localhost:8080/qwer', this.person, {
                            // transformRequest里面会将请求参数(即:这里的this.person)进行转换，转换为'name=JustryDeng&hobby=吃海鲜'的形式
                            transformRequest: [
                                function (data) {
                                    let params = '';
                                    for (let key in data) {
                                        params += key + '=' + data[key] + '&';
                                    }
                                    if (params.length > 0) {
                                        // 去除最后的那个&
                                        params = params.substring(0, params.length - 1)
                                    }
                                    // console.log(params);
                                    return params;
                                }
                            ]
                        }).then((response) => {
                            // handle success
                            this.resultTwo.successInfo = response.data;
                        }).catch(error => {
                            // handle error
                            this.resultTwo.failureInfo = error;
                        }).then(() => {
                            // always executed
                        });
                    }
                }
            });
        }
    </script>
</head>

<body>
    <div id="myId">
        <button @click="postJsonTestOne">axios发送post + form请求(测试一)</button>
        <p>{{resultOne.successInfo}}</p>
        <p>{{resultOne.failureInfo}}</p>

        <button @click="postJsonTestTwo">axios发送post + form请求(测试二)</button>
        <p>{{resultTwo.successInfo}}</p>
        <p>{{resultTwo.failureInfo}}</p>
    </div>
</body>

</html>
    测试一下：
    在这里插入图片描述

再次声明： 本文只是按照https://github.com/axios/axios所述，敲的非常简单、非常基础的demo，更多细节、更多功能可详见该地址。

^_^ 如有不当之处，欢迎指正

^_^ 学习链接
         https://github.com/axios/axios

^_^ 本文已经被收录进《程序员成长笔记(六)》，笔者JustryDeng

justry_deng
关注
专栏目录
axios发送网络请求
她还会来吗的博客
04-29 555
网络模块封装 选择什么网络模块 传统的Ajax 缺点:配置和调用方式等非常混乱 jQuery-Ajax 缺点:在Vue整个开发中都是不需要使用jQuery的 axios axios 功能特点: 在浏览器中发送XMLHttpRequests请求 在Node.js中发送http请求 支持Promise API 拦截响应和请求 转换请求和响应数据 axios的基本使用 安装axios框架: npm install axios --save 在入口文件main.js中引入axios并调用 注意:axios
Axios发送请求
G1best的博客
08-04 4569
Axios发送请求
【Axios】常用请求方法和请求配置详解
最新发布
lph159的博客
09-16 1273
Axios 是一个流行的 HTTP 客户端，用于浏览器和 Node.js。它的最大特点是基于 Promise，方便处理异步操作。此外，它还支持请求和响应的拦截、取消请求、自动转换 JSON 数据等功能。Axios 常用于前端与 RESTful API 通信。Axios 是一个功能强大、灵活的 HTTP 客户端，适用于各种前后端通信场景。通过掌握 GET、POST、PUT、DELETE 等常见请求方法，以及请求头、超时、拦截器、取消请求等高级功能，开发者可以轻松应对复杂的网络请求场景。
axios入门——常用五种请求方法介绍（get、post、put、patch、delete）
艾丽的博客
01-18 2万+
写在前面 axios中文说明 为方便起见，axios为所有支持的请求方法提供了别名 params 是将与请求一起发送的 URL 参数，对应后台中的query data 是作为请求主体被发送的数据，对应后台中的body axios.request(config) axios.get(url[, config]) // 只支持 params 传参 axios.delete(url[, config]) // 只支持 params传参 axios.head(url[, config]) // 只支持 para
axios介绍和使用
热门推荐
qq_40837310的博客
02-21 8万+
简介 本文主要讲解axios的概念和基本使用。 axios时目前最流行的ajax封装库之一，用于很方便地实现ajax请求的发送。 支持的功能： 从浏览器发出 XMLHttpRequests请求。 从 node.js 发出 http 请求。 支持 Promise API。 能拦截请求和响应。 能转换请求和响应数据。 取消请求。 实现JSON数据的自动转换。 客户端支持防止 XSRF攻击。 先借助json-server创建一个简单的服务，供ajax发送请求，json-server是一个简单的可以接收rest
axios请求大全
Cloud的专栏
07-23 1556
本文讲解axios封装方式以及针对各种后台接口的请求方式axios的介绍和基础配置可以看这个文档: 起步 | Axios中文文档 | Axios中文网axios封装的重点有三个，一是设置全局config,比如请求的基础路径，超时时间等，第二点是在每次请求前往请求头里面塞token,第三点是处理请求的response,如果出错了进行统一的错误处理 发送GET请求 我们先来看swagger文档,这个请求是get请求，传递的参数是query,也就是跟在url后面的键值对，类似于?key1=val1&key2
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
10-17
本篇文章将详细解释如何在Vue项目中配置axios，使其在发送Ajax请求时自动携带cookie。 首先，axios在默认情况下不会自动将浏览器的cookie添加到请求头中。这是因为跨域请求（CORS）的安全策略限制，防止恶意网站...
使用axios请求时,发送formData请求的示例
10-16
本篇文章将详细讲解如何使用`axios`来发送`FormData`请求。 `FormData`是一种特殊的JavaScript对象，它允许我们构建键值对，以模拟HTML表单提交的数据格式。这对于上传文件或发送包含多个部分的数据尤其有用。下面...
【JavaScript源代码】React中使用axios发送请求的几种常用方法.docx
12-29
// 在发送请求之前做些什么 return config; }, error => { // 对请求错误做些什么 return Promise.reject(error); } ); axios.interceptors.response.use( response => { // 对响应数据做点什么 return...
html里面使用axios发送请求
qq_45911604的博客
04-01 1万+
html里面使用axios发送请求
Axios 请求发送
m0_73559209的博客
11-17 48
Axios 请求发送
axios发送请求的方式
weixin_45427945的博客
06-17 2087
axios发送请求的方式
axios 超时_网络请求 axios 插件
weixin_39737947的博客
11-23 122
对于新(自己不知道或者不会使用的技术的统称)技术而言，总是要经历几个过程：学习->使用->在使用中学习->再使用->熟练使用，完全掌握，举一反三。我一直想把我学到或者说使用着的好的技术知识做一个简单的总结，也算是一个简单的复盘的过程，同时也逼迫自己不断去学习新的技能，应用在实际的开发工作中，并持续性输出学习文档等，最终形成自己的知识链。今天是这个宏伟目标的第一步。...
AJAX请求（axios篇）
百赢出品，必属精品
04-15 1537
AJAX是“Asynchronous JavaScript and XML”的缩写，它是一种用于创建交互式网页应用程序的技术。AJAX允许在不重新加载整个网页的情况下，异步地向服务器发送请求并获取数据。这使得网页可以更加动态和交互性，而不会中断用户的操作。Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js环境，它可以在前端和后端进行HTTP请求。它的设计简单、易于使用，提供了丰富的功能和选项来处理HTTP请求和响应。
【vue】利用axios发送请求
python全栈
09-25 1万+
保存到LocalStorage中：永久存储，只有不手动删除，永久保存到LocalStorage中。在main.js中导入index.js，作为全局对象，方便以后的开发项目中使用。保存到sessionStorage中：关闭浏览器之后，删除内容。在api/index.js中对axios对后端请求进行统一封装。请求失败时，控制台输出的对象。请求成功时，控制台输出的对象。保存登录返回的token。固定写法，复制粘贴即可。根组件App.vue。
vue--axios发送请求
weixin_34378969的博客
10-24 71
首先安装：axios $ npm install axios $ cnpm install axios //taobao源 $ bower install axios 或者使用cdn： <script src="https://unpkg.com/axios/dist/axios.min.js"></script> main.js里面引入： i...
axios 网络请求
qq_16786131的博客
03-20 1552
一、安装 axios 依赖 npm install axios --save 二、导入axios import axios from 'axios' 三、基础用法 1、不传参数（默认是get请求 ） axios({ url: 'http://httpbin.org/get', method:'get'//可以省略 不写默认是get }).then(res => { console.log(res); }) 2、不传参数（第二种写法） axios.get('http://httpbin
Axios发送请求的方法
weixin_68658847的博客
12-14 6659
Axios发送请求的方法
【前端】-【axios】-学习笔记
weixin_40852935的博客
06-13 3505
1.请求方式2.请求参数用来快速搭建REST API 的工具包 10秒快速建一个服务器在线文档: https://github.com/typicode/json-server 2.2.3 使用浏览器访问测试 http://localhost:3000/posts http://localhost:3000/posts/1测试 GET/POST/PUT/DELETEGET query参数 get Params参数 请求体 urlencoded形式 请求体 json形式..................
vue3使用axios发送请求
09-22
在Vue3中，您可以使用Axios库来发送HTTP请求。首先，您需要安装Axios库。您可以通过在终端中运行以下命令来完成安装： ``` npm install axios ``` 安装完成后，您可以将Axios导入到Vue组件中，并使用axios.get()方法来发送GET请求。以下是一个简单的示例： ```javascript import axios from 'axios'; export default { methods: { fetchData() { axios.get('https://api.example.com/data') .then(response => { // 处理响应数据 console.log(response.data); }) .catch(error => { // 处理错误 console.error(error); }); } } }; ``` 在上面的示例中，我们通过调用axios.get()方法来发送GET请求，并使用.then()方法处理成功的响应数据，使用.catch()方法处理错误。您可以根据实际需求自定义请求的URL和处理响应的逻辑。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值