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

【vue】利用axios发送请求

2024-05-20 14:05:51 前端知识 前端哥 657 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基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

优课教育

2024-05-28 17:05:59

JavaScript天气预报HTML，JS，CSS网页代码

2024-05-28 10:05:55

JavaScript天气预报HTML，JS，CSSCSS代码

2024-05-28 10:05:01

HTML5 网页端年会抽奖源码，导入名单列表即可使用，系统盘点前端开发者必须掌握的知识点

2024-05-28 09:05:21

HTML5 常用标签

2024-05-28 09:05:21

html5--表格和列表

2024-05-28 09:05:21

HTML5中视频标签学习中出现只显示声音而没有画面的情况。

2024-05-28 09:05:09

html5播放flv视频

2024-05-28 09:05:06

HTML5(一)——新增元素和属性，让人茅塞顿开

2024-05-28 09:05:57

html5测试题整理--针对标签的概念性，JavaScript的常用内置函数

2024-05-28 09:05:51

大家推荐的文章
1

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
2

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
3

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
4

UE4.27支持HTML5

2024-05-07 13:05:261000
5

前端vue项目使用Decimal.js做加减乘除求余运算

2024-04-23 21:04:401000
6

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000
7

jQuery事件处理

2024-03-12 01:03:321000
8

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

2024-03-03 11:03:011000
9

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
10

echarts实现动态渲染多柱图

2024-02-12 14:02:341000

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

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

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

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

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