本文介绍了Axios这款HTTP库的基本概念，强调其支持Promise、跨平台使用和强大的拦截器功能。详细讲解了如何安装Axios，并在Vue项目中全局挂载。还列举了常用的API，包括GET和POST请求的使用方法，以及通用请求配置。最后，通过综合案例展示了在实际项目中的应用。
目录
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 => {
console.log('失败', err)
alert(err.response.data.msg)
})
},
[2]另一种形式
2、发起一个POST请求axios.post(url[, data[, config]])
<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>
login() {
//实现登录
this.$axios.post('http://dida100.com:8888/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.log(err)
})
}3.通用请求axios(config)，通过向 axios 传递相关配置config对象来创建请求
<div>
<h3>添加留言</h3>
<textarea cols="" rows="" v-model="msg"></textarea><br>
<button @click='sendMsg'>发表留言</button>
</div>
sendMsg() {
this.$axios({
url: '/api/feed',
method: 'post',
data: {
msg: this.msg
}
})
.then(res => {
// alert(res.data.msg);
if (res.data.code == 200) {
this.current = 1;
this.getFeed();
this.msg = '';
}
})
},六、综合案例
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 cols="" rows="" 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}}<button @click='del(item)'>删除</button></h5>
<p>{{item.msg}}</p>
<p>{{item.date}}</p>
</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 type="text/javascript">
export default {
data() {
return {
msg: '', //需要添加评论
current: 1,
feedlist: [],
pagnation: {},
user: {
name: '',
password: ''
},
userInfo: JSON.parse(localStorage.getItem("userInfo") || "{}"),
token: localStorage.getItem('token'),
}
},
created() {
this.getFeed()
},
methods: {
// 实现删除
del(item){
this.$axios.delete('/api/feed/'+item.id)
.then(res=>{
if(res.data.code==0){
alert('删除成功')
this.current=1
this.getFeed();
}
})
},
sendMsg() {
this.$axios({
url: '/api/feed',
method: 'post',
data: {
msg: this.msg
}
})
.then(res => {
// alert(res.data.msg);
if (res.data.code == 200) {
this.current = 1;
this.getFeed();
this.msg = '';
}
})
},
//获取评论信息
//-除了登录与注册,接口规定向服务器请求数据必须加上-请求头token
// token一串加密的字符,包含了用户信息等..（后端靠token识别用户名是否登录）
getFeed() {
this.$axios.get(
'/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 => {
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('http://dida100.com:8888/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.log(err)
})
}
}
}
</script>
<style>
.active {
color: #ff0;
}
.pagnation span {
padding: 15px;
cursor: pointer;
}
</style>
main.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权限
// baseURL基础URL
new Vue({
render: h => h(App),
}).$mount('#app')效果图：
扫一扫
4099
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
