Vue中axios的基本用法

这篇具有很好参考价值的文章主要介绍了Vue中axios的基本用法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

1.什么是axios?

2.axios的特征

3.axios在使用的时候需要注意的细节 

4.axios在vue中的实例运用(留言评论接口) 

App.vue代码

mian.js代码


 

1.什么是axios?

axios 是一个基于promise 用于浏览器和 nodejs 的 HTTP 客户端。简单的理解就是ajax的封装

2.axios的特征

  1.     从浏览器中创建 XMLHttpRequest
  2.     从 node.js 发出 http 请求
  3.     支持 Promise API
  4.     拦截请求和响应
  5.     转换请求和响应数据
  6.     取消请求
  7.     自动转换JSON数据
  8.     客户端支持防止 CSRF/XSRF

3.axios在使用的时候需要注意的细节 

引用 axios 时 Vue.prototype.axios = axios  Vue.prototype.$axios = axios    Vue.prototype.$http = axios  其实是都一个东西,只是vue的原型链上加个变量(且变量不同),值是axios对象 。

只是 一个是jquery封装过的异步调用方法    一个是vue推荐的第三方异步封装方法  他们都是调用的axios对象

只是调用的时候 axios.post({..})   this.$axios.post({...})     this.$http.post({....})文章来源地址https://www.toymoban.com/news/detail-472754.html

4.axios在vue中的实例运用(留言评论接口) 

App.vue代码

<template>
	<div>
		<h1>学习axios</h1>
		<div v-if="token">
			{{userInfo.name}} 积分:{{userInfo.score}} 等级:{{userInfo.rank}}
			<button @click="logout">退出</button>
		</div>
		<div class="login" v-else>
			<h3>登录</h3>
			用户名: <input type="text" v-model="user.name"> <br>
			密码: <input type="password" v-model="user.password"> <br>
			<button @click="login">登录</button>
		</div>
		<div>
			<h3>添加留言</h3>
			<textarea rows="" cols="" v-model="msg">
			</textarea> <br>
			<button @click="sendMsg">发表留言</button>

		</div>
		<div class="list" v-if="feedlist.length">
			<div class="item" v-for="item in feedlist" :key="item.id">
				<h5>{{item.name}}</h5>
				<p>{{item.msg}}</p>
				<p>{{item.date}}</p>
				<hr>
			</div>
		</div>
		<!-- pagnation.pageTotal 如果有分页信息就显示,没有就隐藏 -->
		<div class="pagnation" v-if="pagnation.pageTotal">
			<!-- 如果current小等于就disabled 按钮不可以用 -->
			<button :disabled="current<=1" @click="current--;getFeed()">上一页</button>
			<!-- 循环遍历总分页书 出现1,2,3,4 -->
			<!-- 如果current等于item 就是当前页给一个active的class -->
			<!-- 单击时候设置current,获取分页对应的评论列表信息 -->
			<span :class="{'active':current==item}" v-for="item in pagnation.pageTotal" :key="item"
				@click="current=item;getFeed()">{{item}}</span>
			<!-- 如果current大于等于总分页数据 按钮不可以用 -->
			<button :disabled="current>=pagnation.pageTotal" @click="current++;getFeed()">下一页</button>

		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				msg: '', //需要添加的评论
				current: 1, //默认获取第一页评论
				feedlist: [], //笑话列表
				pagnation: {

				}, //分页信息
				user: {
					name: '',
					password: '',
				},
				// 从本地获取用户信息 parse 把json字符串转换为js对象
				userInfo: JSON.parse(localStorage.getItem("userInfo") || "{}"), //用户信息,
				// 从本地获取token,字符串不需要pase转
				token: localStorage.getItem("token"), //token
			}
		},
		// 组件创建完毕就加载
		created() {
			this.getFeed();
		},
		// 登录后显示用户信息
		methods: {
			sendMsg() {
				// 基础方法
				this.$axios({
						url: "/api/feed",
						method: "post",
						data: {
							msg: this.msg
						}
					})
					.then(res => {
						// alert(res.data.msg);
						if (res.data.code == 0) {
							// 让页面回归第一1
							this.current = 1;
							// 获取评论列表
							this.getFeed();
							// 清空评论框
							this.msg = '';
						}
					})
			},
			// 登录成功后,获取评论信息
			// 除了登录与注册,接口规定向服务器请求数据必须加上 请求头token
			// token一串加密的字符,包含了用户信息等..(后端靠token识别用户是否登录)
			getFeed() {
				this.$axios.get(
						"/api/feed?current=" + this.current, //请求url
						// {
						// 	headers:{
						// 		"Authorization":'Bearer '+localStorage.getItem("token")
						// 	}
						// }
					)
					// 网络请求成功
					.then(res => {
						console.log("成功", res.data)
						this.feedlist = res.data.data; //评论信息
						// 更新分页信息
						this.pagnation = res.data.pagnation; //分页信息
					})
					// 网络请求失败
					.catch(err => {
						console.log("失败", err);
						alert(err.response.data.msg)
					})
			},
			logout() {
				// 清空用户信息与token
				this.userInfo = {};
				this.token = null;
				// 移除本地存储
				localStorage.removeItem("userInfo");
				localStorage.removeItem("token");
			},
			login() {
				// 实现登录
				this.$axios.post(
						"/api/login", //请求的地址
						this.user, //请求的数据
					)
					.then(res => {
						// 网络请求成功
						if (res.data.code === 200) {
							// res是响应的数据
							// 01 本地存用户信息,与token
							// stringify 把js对象转换为json字符串
							localStorage.setItem("userInfo", JSON.stringify(res.data.user))
							localStorage.setItem("token", res.data.token);
							// 02 更新userInfo与token
							this.userInfo = res.data.user;
							this.token = res.data.token;
							// 登录成功 获取评论
							this.getFeed()
						} else {
							alert(res.data.msg);
						}
					})
					.catch(err => {
						// 网络请求失败
						console.error(err)
					})
			}
		}
	}
</script>

<style>
	.active {
		color: #FF7700
	}

	.pagnation span {
		padding: 15px;
		cursor: pointer;
	}
</style>

mian.js代码

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
// 导入axios 没有./  (axios网络请求工具:1不依赖dom,2.前后端都可以用,3. 丰富拦截,扩展功能,4可封装,复用性强)
import axios from 'axios';
// 挂载到vue的全局(原型上),在每个组件都可以使用 ,prototype是固定的,$axios是自定义的
Vue.prototype.$axios = axios;
// 指定默认的请求域名
axios.defaults.baseURL = "http://dida100.com:8888"
// 给每个请求拦截一下,添加请求Token信息
axios.interceptors.request.use(function(config){
	config.headers.Authorization = 'Bearer '+localStorage.getItem("token");
	return config;
})
// interceptors 拦截器
// request 请求
// config 配置 
// headers头信息
// Authorization 权限
// defaults 默认
// baseURL 基础URL
new Vue({
  render: h => h(App),
}).$mount('#app')

到了这里,关于Vue中axios的基本用法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Axios基本使用,为学习后续的Vue服务【发送请求+并发请求+前端拦截器】

    目录 1、项目中引入Axios 2、使用Axios发送请求 2.1、例:发送GET请求 2.2、例:发送POST请求 3、axios并发请求 4、拦截器 注:个人学习笔记,因自己学过后端,所以有关后端的代码,我在这里就不展示了~ 不了解后端的宝子,也不会耽误学习,因为公司里会有写好的接口文档,直

    2024年02月02日
    浏览(50)
  • vue3+js+viter+element UI+Axios项目初始化基本流程

    1 创建vue3项目 2 创建git代码管理仓库 2.1 创建本地管理仓库 2.2 创建远程仓库 3 初始化项目设置 3.1 安装项目所需要的依赖 3.2 完成别名联想设置 3.2.1 什么叫别名联想呢?(如果了解的话可以跳过这个标题) 3.2.2 设置别名联想 3.2.2.1 打开jsconfig.json文件 3.2.2.2 打开vite.config.js文件

    2024年03月27日
    浏览(66)
  • Vue2-动态路由传参的基本用法

    在Vue 2中,可以使用动态路由传递参数。动态路由参数允许你在路由路径中包含占位符,这些占位符可以在路由被匹配时提取出来并作为参数传递给组件。 下面是一个使用Vue 2动态路由传参的基本用法的例子: 首先,在路由配置文件(通常是 router/index.js )中定义一个带有动

    2024年02月01日
    浏览(41)
  • 路由,vue-router的基本用法,vue-router的常见用法$route.params、$router.push、$router.replace、$router.go

    路由(英文: router)就是 对应关系 。 SPA指的是一个web网站只有唯一的一个HTML页面, 所有组件的展示与切换 都在这唯一的一个页面内完成。此时, 不同组件之间的切换 需要通过 前端路由 来实现。 *结论:*在SPA项目中, 不同功能之间的切换 ,要 依赖于前端路由 来完成! 通俗

    2024年01月16日
    浏览(50)
  • vue中vuex的五个属性和基本用法,另加js-cookie的使用

    VueX 是一个专门为 Vue.js 应用设计的状态管理构架,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。 state, getters, mutations, actions, modules。 1. state: vuex的基本数据,用来存储变量 2. geeter: 从基本数据(state)派生的数据,相当于state的计算属性 3.

    2024年02月14日
    浏览(41)
  • 图像处理中,采用极线约束准则来约束特征点匹配搜索空间,理论上在极线上进行搜索。这里的极线是什么线,怎么定义的?基本矩阵F和本质矩阵E有什么区别?

    问题描述:图像处理中,采用极线约束准则来约束特征点匹配搜索空间,理论上在极线上进行搜索。这里的极线是什么线,怎么定义的?基本矩阵F和本质矩阵E有什么区别? 问题1解答: 极线是通过极线几何学的原理定义的。在摄影测量学和计算机视觉中,极线是由两个相机

    2024年01月19日
    浏览(37)
  • axios封装以及详细用法

    axios官网 下载文件时 在前端项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。他有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方

    2024年02月07日
    浏览(35)
  • axios (用法、传参等)

    是一个专注于网络请求的库。 中文官网地址: http://www.axios-js.com/ 可直接点击这里跳到中文官网 英文官网地址: https://www.npmjs.com/package/axios 可直接点击这里跳转到英文官网 直接引入 然后在全局下就有这个方法了 结果: 结论: 调用 axios 方法得到的返回值是 Promise 对象 然后

    2024年02月09日
    浏览(36)
  • axios取消请求CancelToken的用法

    axios中取消请求情况分为1:取消该请求之后的相同请求;2:取消该请求之前的相同请求 ##取消该请求之后的相同请求: 在使用 axios 发送请求时,如果在短时间内连续发送同一个请求,可能会出现请求结果混乱或重复响应的问题。为了避免这种情况,我们可以使用 axios 的取消

    2024年02月14日
    浏览(39)
  • React项目规范:目录结构、根目录别名、CSS重置、路由、redux、二次封装axios

    先创建项目: create-react-app 项目名 ,然后换个图标,换个标题 配置 jsconfig.json :这个文件在Vue通过脚手架创建项目时自动生成, React是没有自动生成, jsconfig.json 是为了让vs code的代码提示更友好, 按需求决定是否配置; 对 src 文件夹的目录进行初始化: 1、安装craco: npm install

    2023年04月08日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包