菜单 搜索
首页 前端知识 【vue】利用axios发送请求

【vue】利用axios发送请求

2024-05-20 14:05:51 前端知识 前端哥 675 652 我要收藏

在这里插入图片描述

【vue】利用axios发送请求

  • 一、项目环境配置
  • 二、利用axios发送POST请求登录
  • 三、异步实现：利用axios发送POST请求登录（json）
  • 四、异步实现：利用axios发送POST请求登录（表单）
  • 五、token存储
  • 六、token使用
  • 七、全局的axios配置
    • 1、方式一
    • 2、方式二
  • 八、请求拦截器和响应拦截器

一、项目环境配置

根组件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;
	
})
复制

在这里插入图片描述

转载请注明出处或者链接地址：https://www.qianduange.cn//article/8985.html
标签
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！