当前位置：首页 > news >正文

Vue学习 -- 如何用Axios发送请求（get post）Promise对象跨域请求问题

news 文章来源：https://blog.csdn.net/fuhao6363/article/details/129623881 2025/5/24 3:28:34

什么是Axios

Vue本身是不支持发送axios请求，需要使用第三方插件，这里推荐使用Axios，Axios是基于promise的HTTP库；它会从浏览器中创建XMLHttpRequset对象。

安装Axios

npm install axios -S

下载后把axios.js文件复制进项目目录并引入进代码里就可以了

Promise对象认识

Axios是基于Promise的HTTP库，那么Promise是什么呢？所谓Promise，简单来说就是一个容器，里面保存着某个未来才会结束的事件的结果，可以理解为这个对象代表着一个异步操作，有pending、fulfilled、rejected三种状态。

通过Promise对象的then方法可以接收异步操作成功的回调函数；通过catch方法捕获异常，可以接收异步操作失败的回调函数。

    login(){return new Promise(function(resolve,reject){//执行成功后执行的回调函数resolve(val)}).catch(err=>{reject(err) //执行失败的回调函数})}

其中resolve在异步操作成功时调用，并将异步操作的结果作为参数传递出去；reject在异步操作失败时调用，并将异步操作报出的错误作为参数传递出去。

使用Axios发送Ajax请求

1、Ajax请求与HTTP请求的区别
Ajax请求与HTTP请求都是客户端向服务器发送请求的方式。不同的是，Ajax请求是通过XMLHttpRequest对象请求服务器，局部刷新页面，通常说是异步请求，不会阻塞其他代码的执行。

2、Axios的基本用法
使用Axios发送Ajax请求有三种方式
(1)axios([options])
该方式既可以发送get请求，也可以发送post请求。options为Axios方法参数选项，主要有method、url、responseType。method表示请求方式类型，url表示请求的地址；responseType表示后端返回数据的类型，整个options可以没有
(2)axios.get(url[,options])
该方式指明了发送Get请求，url表示请求地址
(3)axios.post(url[,data[,option]])
该方式指明了发送post方式请求，url表示请求地址，data表示发送到服务器端的数据，option和1一样
请求方式除了常用的Get Post外还有put delete。

3、使用Axios发送Ajax请求示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./axios.min.js"></script><script src="../js/vue.js"></script>
</head><body><div id="app"><button @click="send">点击发送请求</button></div>
</body>
<script>var vm = new Vue({el: "#app",data: {},methods: {send() {axios({method: 'get',url: 'user.json',  //user.json与当前文件在同一个路径下，如果user.json不存在则返回‘请求失败’responseType: 'json'   //这句不能少 否则火狐浏览器下会报错//上述之后会返回一个Promise对象，然后调用该对象的then方法（也就是执行成功的回调方法）}).then(function (resp) { //resp表示执行成功的结果console.log(resp)console.log(resp.data)}).catch(err => {    //catch表示执行失败的调用函数 err表示失败的结果console.log("请求失败")})}}})
</script></html>

执行结果如图：
在这里插入图片描述
如果修改user,json文件的名字再次运行该代码就会报如下错误：

使用axios.post发送Ajax请求

axios.post(url[,data,options])

这是发送post请求的语法
第一个参数要为请求处理的服务端程序；第二个参数要是数据，第三个参数为选项（可不写）。

创建一个server.js文件在项目下，作为项目的服务器，用express库创建服务器：

const express = require('express')
const app = express()app.listen(2000, () => {console.log("服务启动了")
})

然后再客户端编写如下代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./axios.min.js"></script><script src="../js/vue.js"></script>
</head><body><div id="app"><button @click="send">点击发送请求</button><button @click="sendPost">点击发送Post请求</button></div>
</body>
<script>var vm = new Vue({el: "#app",data: {},methods: {send() {axios({method: 'get',url: 'user.json',  //user.json与当前文件在同一个路径下，如果user.json不存在则返回‘请求失败’responseType: 'json'   //这句不能少 否则火狐浏览器下会报错//上述之后会返回一个Promise对象，然后调用该对象的then方法（也就是执行成功的回调方法）}).then(function (resp) { //resp表示执行成功的结果console.log(resp)console.log(resp.data)}).catch(err => {    //catch表示执行失败的调用函数 err表示失败的结果console.log("请求失败")})},sendPost() {axios.post('server.js', {name: "zhangsan",age: "20"}).then(resp => {comsole.log(resp.data)}).catch(err => {console.log('请求失败')})}}})
</script></html>

用nodemon .\server.js启动服务(也可以用node)
![在这里插入图片描述](https://img-blog.csdnimg.cn/9d94f281935e400a92b2e0a9ff674218.png

然后运行页面点击按钮发送请求

在这里插入图片描述
请求失败了

为什么呢？我也不知道，希望评论区大佬解答。

不过虽然请求失败了但是请求确实发了出去证明使用axios.post方法发送post请求是成功的。

改进：以键值对的形式传递参数
以键值对的形式传递参数，类似于get的传值方式。把代码改为如下代码：

axios.post('127.0.0.1:2000',"name=zhangsan&age=20")

这样的话发送的请求数据格式是Form Data

这样是传的死的值也就是很僵硬的数据
我们还可以这样传：

<script>var vm = new Vue({el: "#app",data: {user:{name:"zhangsan",age:20}},methods: {send() {axios({method: 'get',url: 'user.json',  //user.json与当前文件在同一个路径下，如果user.json不存在则返回‘请求失败’responseType: 'json'   //这句不能少 否则火狐浏览器下会报错//上述之后会返回一个Promise对象，然后调用该对象的then方法（也就是执行成功的回调方法）}).then(function (resp) { //resp表示执行成功的结果console.log(resp)console.log(resp.data)}).catch(err => {    //catch表示执行失败的调用函数 err表示失败的结果console.log("请求失败")})},sendPost() {axios.post('server.js', 'name='+data.user.name+'&age='+data.user.age).then(resp => {comsole.log(resp.data)}).catch(err => {console.log('请求失败')})}}})
</script>

此时传递的写法有点类似于Get请求方式，但是与get不同，get的请求数据在地址栏可以看到

继续改进：解决字段拼接问题
如果字段比较多，使用上面的方法就会显得很麻烦，甚至很蠢。axios提供了transformRequest选项，可以在请求发送前对数据进行转换（拼接成FormData的形式）。

<script>var vm = new Vue({el: "#app",data: {user: {name: "zhangsan",age: 20}},methods: {send() {axios({method: 'get',url: 'user.json',  //user.json与当前文件在同一个路径下，如果user.json不存在则返回‘请求失败’responseType: 'json'   //这句不能少 否则火狐浏览器下会报错//上述之后会返回一个Promise对象，然后调用该对象的then方法（也就是执行成功的回调方法）}).then(function (resp) { //resp表示执行成功的结果console.log(resp)console.log(resp.data)}).catch(err => {    //catch表示执行失败的调用函数 err表示失败的结果console.log("请求失败")})},sendPost() {axios.post('server.js', this.user,{// transformRequest 是个数组 数组里面是个函数 data就是第二个参数值this.user ，是一个对象transformRequest:[function(data){var params ='';for(var item in data){params+=item+'='+data[item]+'&';}return rarams;}]}).then(resp => {comsole.log(resp.data)}).catch(err => {console.log('请求失败')})}}})
</script>

transformRequest 是个数组
数组里面是个函数 data就是第二个参数值this.user ，是一个对象

持续改进：用URLSearchParams传递参数
使用URLSearchParams类型传递参数，主要通过URLSearchParams对象的append方法把参数加入URLSearchParams对象中。

 var param = new  URLSearchParams()param.append('name','lisi')param.append('age',30)

sendPost() {axios.post('server.js',param).then(resp => {comsole.log(resp.data)}).catch(err => {console.log('请求失败')})}}

跨域请求

1、什么是跨域
如果两个URL的协议、域名、端口都相同，那么这两个URL就是同源，不是同源的就是跨域的。也就是说，凡是发送请求URL的协议、域名、端口三者中，任意一个与当前页面的URL不同即为跨域。

Axios本身并不支持发送跨域请求，所以只能使用第三方库，如使用jQuery、vue-resouce。但是，如果要访问的URL本身已允许跨域访问，就可以直接访问。就比如：github服务器本身就是允许跨域访问的。

实际演示

跨域请求，通过个人文本框输入个人账户id，获取个人github信息。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./axios.min.js"></script><script src="../js/vue.js"></script>
</head><body><div id="app">请输入Github ID : <input type="text" v-model="uid"><button @click="getUserByUid(uid)">获取指定账户信息</button></div><script>var vm = new Vue({el: "#app",data: {uid: '',user: {}},methods: {getUserByUid(uid) {//这里到Github上去找，不在同一个域，所以就是跨域//注意下面注释的写法两端不是单引号axios.get(`https://api.github.com/users/${uid}`).then(resp => {console.log(resp.data)}).catch(err => {console.log(console.log('请求失败'))})}}})</script>
</body></html>

在这里插入图片描述
这是笔者的github id

Vue学习 -- 如何用Axios发送请求（get post）Promise对象跨域请求问题

什么是Axios

安装Axios

Promise对象认识

使用Axios发送Ajax请求

使用axios.post发送Ajax请求

跨域请求

实际演示

相关文章：

Vue学习 -- 如何用Axios发送请求（get post）Promise对象跨域请求问题

TVS和稳压管的相同点和不同点

微信小程序项目实例——扫雷

2022-2023年度广东省职业院校学生专业技能大赛中职组网络安全赛项竞赛规程

超详细的堆排序，进来看看吧。

线性回归特征扩展的原理与python代码的实现

订阅关系一致

测试老鸟都在用的接口抓包常用工具以及接口测试工具都有哪些？

Delphi 一个函数实现腾讯云最新版（API3.0）短信发送

2023年Android现代开发

自然语言处理（NLP）在医疗领域的应用

计算机中的浮点数运算

看了字节跳动月薪20K+测试岗面试题，让我这个工作3年的测试工程师，冷汗直流....

这两天最好的ChatGPT应用；使用Notion AI提升效率的经验(13)；AI编程与程序员的生存 | ShowMeAI日报

Linux 内核likely与unlikey

成功解决主从同步异常之Slave_IO_Running显示为No的问题

面试阿里测开岗失败后，被面试官在朋友圈吐槽了......

蓝桥杯嵌入式--字符串比较在串口通信中的应用

考研408每周一题（2019 41）

Angular学习笔记(一)

Linux用户和权限 —— 操作演示

【华为OD机试真题2023 JAVA】单核CPU任务调度

News乐鑫科技亮相德国嵌入式展 Embedded World 2023！

java如何创建线程

要是早看到这篇文章，你起码少走3年弯路，20年老程序员的忠告

IP地址的分类

win10下使用docker运行部署nginx，mysql

sprinboot车辆充电桩

仿京东放大镜效果的实现

ESP32设备驱动-LM35温度传感器驱动