第五讲 Axios的初步了解

Fiki515

于 2022-07-28 20:28:38 发布

阅读量699

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Fiki515/article/details/126036053

版权

本文介绍了Axios这款HTTP库的基本概念，强调其支持Promise、跨平台使用和强大的拦截器功能。详细讲解了如何安装Axios，并在Vue项目中全局挂载。还列举了常用的API，包括GET和POST请求的使用方法，以及通用请求配置。最后，通过综合案例展示了在实际项目中的应用。

摘要由CSDN通过智能技术生成

1.发起一个GET请求axios.get(url[, config])

2、发起一个POST请求axios.post(url[, data[, config]])

3.通用请求axios(config)，通过向 axios 传递相关配置config对象来创建请求

六、综合案例

一、axios的概念

axios是一款ajax请求工具,是一个用于发送ajax请求的HTTP库，本质上是对AJAX的封装。而且Axios支持 Promise操作，让我们无需再使用传统callback方式来进行异步编程

二、特点

前后端都可以使用

不依赖dom

拦截扩展强大

可封装复用性强

三、安装

npm install axios -S

四. 在VUE全局挂载

1.导入

import axios from 'axios';

2.挂载

Vue.prototype.$axios = axios;

3.App.vue使用

this .$axios.xxx

五、常用api说明

1.发起一个GET请求axios.get(url[, config])

<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>
<script>
  
			getFeed() {
				this.$axios.get(
						'http://dida100.com:8888/api/feed?current=' + this.current, {
							headers: {
								'Authorization': 'Bearer ' + localStorage.getItem('token')
							}
						})
					.then(res => {
						console.log('成功', res.data);
						this.feedlist = res.data.data; //评论信息
						// 更新分页信息
						this.pagnation = res.data.pagnation; //分页信息
					})

					// 网络请求失败
					.catch(err