Vue中axios的基本用法详解

目录
  • 1.什么是axios?
  • 2.axios的特征
  • 3.axios在使用的时候需要注意的细节
  • 4.axios在vue中的实例运用(留言评论接口)
    • App.vue代码
    • mian.js代码

1.什么是axios?

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

2.axios的特征

从浏览器中创建 XMLHttpRequest
    从 node.js 发出 http 请求
    支持 Promise API
    拦截请求和响应
    转换请求和响应数据
    取消请求
    自动转换JSON数据
    客户端支持防止 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({....})

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的基本用法的文章就介绍到这了,更多相关Vue axios用法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 三分钟让你快速学会axios在vue项目中的基本用法(推荐!)

    目录 Axios简介 一.axios是干啥的 二.安装使用 三.Axios请求方式 1.axios可以请求的方法: 2.get请求 3.post请求 4.put和patch请求 5.delete请求 6.并发请求 四.Axios实例 1.创建axios实例 2.axios全局配置 3.axios实例配置 4.axios请求配置 五.拦截器 1.请求拦截器 2.响应拦截器 3.取消拦截 六.错误处理 七.取消请求 结语 提示:本篇详解axios在vue项目中的实例.在使用Vue.js框架开发前端项

  • vue+axios+promise实际开发用法详解

    axios它是基于promise的http库,可运行在浏览器端和node.js中,然后作者尤雨溪也是果断放弃了对其官方库vue-resource的维护,直接推荐axios库,小编我也是从vue-resource转换过来的,差别说不来,我们讲一下axios在实际开发中的用法 axios特点 1.从浏览器中创建 XMLHttpRequests 2.从 node.js 创建 http 请求 3.支持 Promise API 4.拦截请求和响应 (就是有interceptor) 5.转换请求数据和响应数

  • vue axios用法教程详解

    axios是vue-resource后出现的Vue请求数据的插件.vue更新到2.0之后,作者尤大就宣告不再对vue-resource更新,而是推荐的axios. 下面我们来使用axios npm install axios --save-dev import axios from "axios" 这时候如果在其它的组件中,是无法使用 axios 命令的.但如果将 axios 改写为 Vue 的原型属性,就能解决这个问题 1 1.    Vue.prototype.$ajax=axio

  • Vue中axios的基本用法详解

    目录 1.什么是axios? 2.axios的特征 3.axios在使用的时候需要注意的细节 4.axios在vue中的实例运用(留言评论接口) App.vue代码 mian.js代码 1.什么是axios? axios 是一个基于promise用于浏览器和 nodejs 的 HTTP 客户端.简单的理解就是ajax的封装 2.axios的特征 从浏览器中创建 XMLHttpRequest    从 node.js 发出 http 请求    支持 Promise API    拦截请求和响应 

  • vue中 v-for循环的用法详解

    1.v-for循环普通数组 ①创建vue对象 ② 循环数据 结果: 2.v-for循环对象数组 ① 创建vue实例对象 ② 循环对象数组 结果: 3.v-for循环对象 ①创建vue对象实例 ②循环对象 结果: 4.v-for循环数字 ①创建vue对象实例 ②循环数字 结果: 5.v-for中key的使用方式 ①创建vue对象实例 注意:push()方法一般是添加到数组的最后的位置:unshift()方法是往最前面的位置添加. ②循环 注意: v-for循环的时候,key属性只能使用number

  • 关于Vue中axios的封装实例详解

    前言 axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 作为一个优秀的 HTTP 库,axios 打败了曾经由 Vue 官方团队维护的 vue-resource,获得了 Vue 作者尤小右的大力推荐,成为了 Vue 项目中 HTTP 库的最佳选择. 虽然,axios 是个优秀的 HTTP 库,但是,直接在项目中使用并不是那么方便,所以,我们需要对其进行一

  • vue中 this.$set的用法详解

    当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的. <template> <div id="app"> <p v-for="item in items" :key="item.id">{{item.message}}</p> <button class="btn" @click=&qu

  • vue框架中props的typescript用法详解

    什么是typescript typescript 为 javaScript的超集,这意味着它支持所有都JavaScript都语法.它很像JavaScript都强类型版本,除此之外,它还有一些扩展的语法,如interface/module等. typescript 在编译期会去掉类型和特有语法,生成纯粹的JavaScript. Typescript 5年内的热度随时间变化的趋势,整体呈现一个上升的趋势.也说明ts越来越️受大家的关注了. 在vue中使用typescript时,需要引入vue-pro

  • 基于Vue中使用节流Lodash throttle详解

    在Vue中使用 Lodash.throttle 来做节流 在Vue中,有时需要对ajax请求提交进行节流操作.这时候,如果页面在请求成功之后会跳转,使用vue指令once或者加载一个loading遮罩禁止点击即可,但如果请求之后不跳转,并且loading不适用时,需要通过其他方式来实现节流,比如通过标识位判断等,这里我们着重说一下如何通过lodash.throttle来实现节流 lodash lodash是一个广受欢迎的js工具库,其中包含了各种各样的工具函数,方便开发时不需要反复造轮子,更关注

  • Vue 中使用 typescript的方法详解

    什么是typescript typescript 为 javaScript的超集,这意味着它支持所有都JavaScript都语法.它很像JavaScript都强类型版本,除此之外,它还有一些扩展的语法,如interface/module等. typescript 在编译期会去掉类型和特有语法,生成纯粹的JavaScript. Typescript 5年内的热度随时间变化的趋势,整体呈现一个上升的趋势.也说明ts越来越️受大家的关注了. 安装typescript npm install -g ty

  • vue中的ElementUI的使用详解

    登录+sessionStorage 效果展示 登录成功后会把用户id存入前端的sessionStorage,拦截器会根据是否存在用户id来进行拦截 也可以将用户权限存入sessionStorage,然后当访问某个页面的时候在created方法中判断是否具有权限 <template> <div class="login-wrap"> <el-form class="login-container" ref="loginFormR

  • Vue3中setup方法的用法详解

    目录 1.参数props 2.参数context 3. 子组件向父组件派发事件 4.优化事件派发 5.获取父组件传递的值 1.参数props props是一个对象,包含父组件传递给子组件的所有数据.在子组件中使用props进行接收.包含配置声明并传入的所有的属性的对象. 也就是说,如果你想通过props的方式输出父组件传递给子组件的值.你需要使用props进行接收配置.即props:{......}.如果你未通过Props进行接受配置,则输出的值是undefined <template> &l

  • Oracle中游标Cursor基本用法详解

    查询 SELECT语句用于从数据库中查询数据,当在PL/SQL中使用SELECT语句时,要与INTO子句一起使用,查询的 返回值被赋予INTO子句中的变量,变量的声明是在DELCARE中.SELECT INTO语法如下: SELECT [DISTICT|ALL]{*|column[,column,...]} INTO (variable[,variable,...] |record) FROM {table|(sub-query)}[alias] WHERE............ PL/SQL

随机推荐