【vue】利用axios发送请求

已于 2024-02-18 15:25:36 修改
阅读量2.2w 收藏 57
点赞数 7
CC 4.0 BY-SA版权
分类专栏： Vue 文章标签： vue.js 前端 javascript
于 2023-09-25 08:31:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YZL40514131/article/details/133222320

在这里插入图片描述

【vue】利用axios发送请求

一、项目环境配置

根组件App.vue
在这里插入图片描述
路由配置
在这里插入图片描述
main.js配置
固定写法，复制粘贴即可

在这里插入图片描述

二、利用axios发送POST请求登录

<template>
	<div class="box1">
		<el-form label-width="120px">
			<el-form-item label="用户名">
				<el-input v-model="loginForm.username"></el-input>
			</el-form-item>
			<el-form-item label="密码">
				<el-input type="password" v-model="loginForm.password"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button style="width:100%" type="primary" @click="submitLogin">登录</el-button>
			</el-form-item>
		</el-form>
	</div>

</template>

<script>
import axios from 'axios'



	// 使用axios发送post请求
	// 案例：实现登录
	export default{
		data(){
			return{
				loginForm:{
					username:"",
					password:""
				}
			}
		},
		methods:{
			// 点击登录执行的方法
			submitLogin(){
				console.log('点击了登录,',this.loginForm)
				// 点击了登录如何发送http请求？axios
				const params={
					username:this.loginForm.username,
					password:this.loginForm.password
				}
				// 登录的post请求
				const res = axios.post('http://82.156.178.247:5001/users/login/',params)
				console.log('res',res)

				// 设置回调函数，接收返回的响应对象
				// 异步操作成功时，执行的回调函数
				res.then(response=>{
					console.log('请求成功:')
					console.log('respnse',response)
				})
				// 异步操作失败时，执行的回调函数
				res.catch(error=>{
					console.log('请求失败:')
					// console.log('error:',error)
					console.log('请求失败响应对象获取',error.response)
				})
			}
		}
	}

</script>

<style>

</style>

请求失败时，控制台输出的对象
在这里插入图片描述
请求成功时，控制台输出的对象
在这里插入图片描述

三、异步实现：利用axios发送POST请求登录（json）

<template>
	<div class="box1">
		<el-form label-width="120px">
			<el-form-item label="用户名">
				<el-input v-model="loginForm.username"></el-input>
			</el-form-item>
			<el-form-item label="密码">
				<el-input type="password" v-model="loginForm.password"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button style="width:100%" type="primary" @click="submitLogin">登录</el-button>
			</el-form-item>
		</el-form>
	</div>

</template>

<script>
import axios from 'axios'



	// 使用axios发送post请求
	// 案例：实现登录
	export default{
		data(){
			return{
				loginForm:{
					username:"",
					password:""
				}
			}
		},
		methods:{
			// 点击登录执行的方法
			async submitLogin(){
				const params={
					username:this.loginForm.username,
					password:this.loginForm.password
				}
				// 登录的post请求
				const response =await axios.post('http://82.156.178.247:5001/users/login/',params)
				console.log('response:',response)
				// 对响应信息进行判断
				if (response.status===200){
					this.$message({
						type:"success",
						message:"登录成功"
					});
					// 跳转
					this.$router.push({name:"index"})
				}
			},

		}
	}

</script>

<style>

</style>

四、异步实现：利用axios发送POST请求登录（表单）

在这里插入图片描述

<template>
	<div class="box1">
		<el-form label-width="120px">
			<el-form-item label="用户名">
				<el-input v-model="loginForm.username"></el-input>
			</el-form-item>
			<el-form-item label="密码">
				<el-input type="password" v-model="loginForm.password"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button style="width:100%" type="primary" @click="submitLogin">登录</el-button>
			</el-form-item>
		</el-form>
	</div>

</template>

<script>
import axios from 'axios'
import qs from 'qs'


	// 使用axios发送post请求
	// 案例：实现登录
	export default{
		data(){
			return{
				loginForm:{
					username:"",
					password:""
				}
			}
		},
		methods:{
			// 点击登录执行的方法
			async submitLogin(){
				// axios发送表单格式的请求
				const params = qs.stringify(this.loginForm)
				// 登录的post请求
				const response =await axios.post('http://82.156.178.247:5001/users/login/',params)
				console.log('response:',response)
				// 对响应信息进行判断
				if (response.status===200){
					this.$message({
						type:"success",
						message:"登录成功"
					});
					// 跳转
					this.$router.push({name:"index"})
				}
			},

		}
	}

</script>

<style>

</style>

五、token存储

保存登录返回的token
获取token
const token=response.data.token
保存到LocalStorage中：永久存储，只有不手动删除，永久保存到LocalStorage中
window.localStorage.setItem(‘token’,token)
保存到sessionStorage中：关闭浏览器之后，删除内容
window.sessionStorage.setItem(‘token’,token)
保存到cookie中：
window.cookieStore.set(‘token’,token) 

<template>
	<div class="box1">
		<el-form label-width="120px">
			<el-form-item label="用户名">
				<el-input v-model="loginForm.username"></el-input>
			</el-form-item>
			<el-form-item label="密码">
				<el-input type="password" v-model="loginForm.password"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button style="width:100%" type="primary" @click="submitLogin">登录</el-button>
			</el-form-item>
		</el-form>
	</div>

</template>

<script>
import axios from 'axios'
import qs from 'qs'


	// 使用axios发送post请求
	// 案例：实现登录
	export default{
		data(){
			return{
				loginForm:{
					username:"",
					password:""
				}
			}
		},
		methods:{
			// 点击登录执行的方法
			async submitLogin(){
				// axios发送json格式的请求
				const params={
					username:this.loginForm.username,
					password:this.loginForm.password
				}
				// 登录的post请求
				const response =await axios.post('http://82.156.178.247:5001/users/login/',params)
				console.log('response:',response)
				// 对响应信息进行判断
				if (response.status===200){
					this.$message({
						type:"success",
						message:"登录成功"
					});
					// 跳转
					this.$router.push({name:"index"})
					// 保存登录返回的token
					// 获取token
					const token=response.data.token
					// 保存到LocalStorage中
					// window.localStorage.setItem('token',token)
					// // 保存到sessionStorage中
					// window.sessionStorage.setItem('token',token)
					// 保存到cookie中
					window.cookieStore.set('token',token)
				}
			},

		}
	}

</script>

<style>

</style>

六、token使用

<template>
	<h1>index页面</h1>
	<el-button @click="getAllProject">获取项目数据</el-button>

	<h3>{{pros}}</h3>
</template>

<script>
import axios from 'axios'

	export default{
		data(){
			return{
				pros:{

				}
			}
		},
		methods:{
			async getAllProject(){
				// 发送请求
				const url="http://82.156.178.247:5001/projects/"
				const response=await axios.get(url,{
					headers:{
						'Authorization':'JWT ' + window.sessionStorage.getItem('token')
					}
				});
				console.log('response',response);
				this.pros=response.data
			}
		}
	}
</script>

<style>
</style>

在这里插入图片描述

七、全局的axios配置

在api/index.js中对axios对后端请求进行统一封装
在这里插入图片描述

1、方式一

// 针对axios对后端请求进行统一封装（方便后期维护管理）
import axios from "axios"

// 方式一：直接配置axios对象，进行相关的封装
// 设置全局的baseURL
axios.defaults.baseURL='http://82.156.178.247:5001'
axios.defaults.headers.common['kobe']='0924'

export const login=(params)=>{
	axios.post('/login',params)
}

export const getALLPro=()=>{
	axios.get('/login')
}

2、方式二

// 方式二：使用axios创建实例进行相关的配置和封装(适用于微服务的架构)

const http=axios.create({
	// 配置baseURL
	baseURL:'http://82.156.178.247:5001',
	// 配置请求成功的http响应状态码的范围（全部当作成功的处理）
	validateStatus:function(status){
		return true;
	}
})

export default{
	login(params){
		return http.post('/login/',params)
	},
	getAllProject(){
		return http.get('/projects/')
			
}
}

在main.js中导入index.js，作为全局对象，方便以后的开发项目中使用
$api为属性名称
在这里插入图片描述

八、请求拦截器和响应拦截器

// 设置请求拦截器
http.interceptors.request.use(function (config){
	// config为请求对象
	// 如果不是登录接口，那么在请求头中加上Authorization
	if(config.url!=='/login/'){
		config.headers['Authorization']='JWT ' + window.sessionStorage.getItem('token')
	}

	// 每个请求发送之前都会执行该方法，并且会将请求配置对象传到该方法中
	console.log('请求拦截器：',config)
	
	// 在发送请求之前
	return config
});


// 响应拦截器:每个接口请求
http.interceptors.response.use(function(response){
	// 对响应数据做点什么
	console.log('响应拦截器：',response)
	// 在此处对项目中接口调用失败，做统一处理
	return response;
	
})

在这里插入图片描述

axios 发送post要发OPTIONS 的问题解决
西园公子
02-22 1501
重复了两次axios请求，如何避免options请求？？
axios的post请求所有传参方式
夏日漱石的博客
10-16 1万+
axios的post请求所有传参方式
Axios中POST、PUT、PATCH用法区别
最新发布
BillKu的博客
05-22 1523
在 Axios 中，POSTPUT和PATCH是用于发送 HTTP 请求的三种不同方法，它们的核心区别源自 HTTP 协议的设计语义。
Vue之axios请求
m0_55297736的博客
09-26 1702
Vue的axios请求
在vue中使用axios发送请求
l12345666777的博客
12-21 2202
axios是基于promise的http库，可以运行在浏览器和nodejs。特性：1.运行在浏览器和nodejs2.基于promise，可以使用promise实例方法3.可以对请求和响应拦截处理4.运行在浏览器创建XMLHttpRequests5.运行在nodejs创建http请求。
vue中使用axios发送请求
所行皆坦途
07-30 4664
vue中 axios请求原理、用法、图片代码解析，async \await 配合使用、解构 data 并重命名
Vue使用axios发送请求
北执南念的博客
03-07 1295
Vue使用axios发送请求
VUE 之 AXIOS请求
yhl521112的博客
08-27 1万+
AXIOS介绍 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 axios是我们在vue项目中常见封装http请求相对受欢迎的，优点如下： 简单易用，api接近于jquery，比原生的fetch之类的简单， 浏览器兼容性好，都能兼容IE7，使用fetch就得自己处理兼容 通用性好，能在node和浏览器中使用 api一致 稳定大牌，vue官网文档有推荐 以上几点呢，是大多数公司选择使用axios的主要原因，通过简单的了解我们应该知道axios是干嘛的
SSMP整合案例交互之在idea中利用vue和axios发送异步请求进行前后端调用
热门推荐
温柔半两，从容一生
05-30 12万+
正常情况我们是应该把前端页面放在前端服务器上面的。getALL里用axios发送了一个异步请求。如果单体工程的页面放置在resource下。然后是做的事情 我们用箭头函数简化书写。或者是在前端使用功能 然后进行操作。我们需要做的是补全js里面的内容。数据层开发的代码都已经书写完毕。及把数据返回到页面的指定部分。我们这边直接用tomcat了。用maven的clean功能。接下来书写发送异步请求的代码。这样我们前端访问后端就跑成功。接下来我们要书写的是功能。axios发送异步请求。我们每次都要这样测一下。
Vue-Axios网络请求库
05-09
Vue-Axios库简化了这一过程，使得开发者可以不必深入学习原生的XMLHttpRequest或Fetch API来发送请求，因为Axios已经封装好了这些复杂的逻辑。通过Axios，开发者能够以一种简单直观的方式，发起GET、POST、PUT、...
VueWeb axios网络请求
12-13
开发者利用Axios能够方便地处理HTTP请求和响应，且Axios的Promise风格的API使得异步操作更加简洁明了。 Axios之所以能在VueWeb中大放异彩，一方面是因为其基于Promise的设计，它支持ES6之前版本浏览器的Promise ...
VUE项目axios请求头更改Content-Type操作
10-15
在Vue项目中，使用axios库进行HTTP请求时，经常需要对请求头（Request Headers）进行配置。...通过这些知识点，开发者可以更好地理解如何在Vue项目中有效地利用axios库，以及如何处理与请求头相关的各种操作。
vue 实现axios拦截、页面跳转和token 验证
10-18
1. 请求拦截器：在发送请求之前，自动在请求头中添加token： ```javascript axios.interceptors.request.use(config => { if (store.state.token) { config.headers.Authorization = `token${store.state.token}...
在 Vue 3 中使用 Axios 发送 POST 请求
weixin_30029951的博客
08-21 1263
在Vue3 中使用 Axios 发送 POST 请求需要首先安装 Axios，然后在 Vue 组件或 Vuex 中使用它。以下是一个简单的安装和使用案例：安装 Axios你可以使用 npm 或 yarn 来安装 Axios：登录后复制 npm install axios # 或者 yarn...
Vue发送请求之Axios---kalrry
kalrry
04-16 4097
Vue发送请求之Ajax---kalrry一、简介二、Axios1. GET请求get方法传递参数3、POST传递参数三、在脚手架中使用1、安装axios并引入2、传参方式：3、发送AJAX请求 一、简介 vue-resource是vue自带的发送请求方式 ajax是第三方插件来完成 vue本身不支持发送AJAX请求，需要使用vue-resource(vue1.0版本)、axios(vue2.0版本)等插件实现 axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐
Axios发送请求的方法
weixin_68658847的博客
12-14 6945
Axios发送请求的方法
Vue安装并使用axios发送请求
见证自己学习,成长的记录
11-20 5062
本文主要介绍的是使用在Vue项目中安装并使用axios发送请求axios是一种Web数据交互方式它是一个基于promise的网络请求库，作用于node.js和浏览器中，它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)本质是对原生XHRXMLHttpRequest)进行封装，只不过它是Promise的实现版本，符合最新的ES规范，相比于JQuery，它体积更小，只有前者的四分之一左右，并且axios支持拦截器和各种请求。
vue3 axios 发送post请求
03-08
### 如何在 Vue 3 中使用 Axios 发送 POST 请求 #### 安装 Axios 库 为了能够在项目中使用 Axios，首先需要安装这个库。可以通过 npm 或 yarn 来完成安装。 ```bash npm install axios ``` 或者 ```bash yarn add axios ``` 这一步骤确保了可以在应用程序里引入并配置 Axios 实例[^1]。 #### 创建 Axios 实例 创建一个新的 JavaScript 文件用于封装 Axios 配置，比如 `apiClient.js`： ```javascript import axios from 'axios'; const apiClient = axios.create({ baseURL: 'https://example.com/api/', // 替换成实际的服务端URL headers: { Accept: 'application/json', 'Content-Type': 'application/json' } }); export default apiClient; ``` 这段代码定义了一个默认的基础 URL 和一些常见的头部信息，简化后续请求时的设置工作[^4]。 #### 在组件内部发起 POST 请求 下面展示的是在一个 Vue 组件的方法中调用上述 API 客户端实例来进行 POST 请求的例子： ```javascript <template> <!-- HTML结构 --> </template> <script setup> import { ref } from 'vue'; import apiClient from '@/path/to/apiClient'; // 调整路径以匹配你的项目布局 // 假设要发送的数据存储在这个变量中 let postData = { title: 'foo', body: 'bar', userId: 1, }; async function submitData() { try { const response = await apiClient.post('/posts', postData); console.log('Response:', response.data); // 处理返回的结果 } catch (error) { console.error('Error occurred during request.', error); } } </script> ``` 这里展示了如何利用 async/await 结构处理异步操作，并且包含了错误捕捉机制来提高程序健壮性[^2]。 #### 使用 FormData 类型进行文件上传或其他表单提交场景 当涉及到文件上传或者其他类型的表单数据传输时，则应该构建一个 `FormData` 对象作为 payload: ```javascript function prepareFormData(fileInputRef, otherFields={}) { let formData = new FormData(); if (fileInputRef.files.length > 0){ formData.append('file', fileInputRef.files[0]); } Object.keys(otherFields).forEach(key => formData.append(key, otherFields[key]) ); return formData; } async function uploadFileAndSubmitForm(event) { event.preventDefault(); let formElement = document.querySelector('#my-form'); let formDataWithFile = prepareFormData(formElement.elements.namedItem('upload'), { name: 'John Doe', age: 30, }); try { const config = { headers: {'content-type': 'multipart/form-data'} }; const result = await apiClient.post('/submit', formDataWithFile, config); console.log(result.status === 200 ? 'Success!' : 'Failed.'); } catch(e) { console.warn(`Upload failed with message ${e.message}`); } } ``` 注意，在这种情况下，必须指定 Content-Type 为 multipart/form-data 并将其传递给 Axios 的选项对象中。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

敲代码敲到头发茂密

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值