axios库:在vue中我们直接要使用的话,先下载axios 组件中导入,然后在mount(){}钩子中使用即可:axios 发送请求:挂载到mounted生命周期钩子函数中
`概念`:基于Promise的一个http的网络通信的库
`引入axios库`: <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.2/axios.min.js"></script>
`axios发送get请求的语法`
'方式一':
axios.get('服务器地址?键名=键值&键名=键值...')
.then(function(res){
// res: 成功后后端响应的内容
}).catch(function(err){
// err: 请求失败后的错误信息
// 前后端通信没有成功
})
'方式二':
axios.get('服务器地址', {
params: {
属性名: 值,
属性名: 值
}
}).then(function(res){
// res: 成功后后端响应的内容
}).catch(function(err){
// err: 请求失败后的错误信息
})
`axios发送post请求的语法`
axios.post('服务器地址', {
属性名: 值,
属性名: 值
}).then(function(res){
// res就是通信成功后响应的内容
}).catch(function(err){
// err: 通信失败后额错误信息
})
'注意:axios发送的post请求,默认是以json格式来提交参数'
'如果需要以表单数据格式来提交参数,需要使用qs库'
'使用':
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.min.js"></script>
axios.post('服务器地址', Qs.stringify({
属性名: 值,
属性名: 值
})).then(function(res){
// res就是通信成功后响应的内容
}).catch(function(err){
// err: 通信失败后额错误信息
})
二次封装:其实已经可以直接导入使用了,但是我们不满足于此,来个请求管理
设置proxy代理
vite.config.js中配置:::axios 配合 proxy 发送请求:
'解决前端跨域问题:节省了前缀请求url等'
// 设置代理服务器
server:{
proxy:{ //代理
'/api':{ //以 /api 开头的ajax请求,自动转发target所表示的第三方服务器
target:'http://180.76.99.14', //目标服务器
changeOrigin:true, //开启跨域
}
}
}
-
axios请求二次封装:实例化axios,设置请求拦截器 service.interceptors.request.use(),设置响应拦截器 service.interceptors.response.use()
// 定义对象属性
// import { def } from '@vue/shared';
// 导入请求
import axios from "axios";
// 导入组件提示
import { ElNotification } from 'element-plus'
import 'element-plus/es/components/notification/style/css'
// 导入仓库
import { useUserInfoStore } from '@/stores/userinfo'
import router from '@/router'
var userinfoStore = useUserInfoStore()
// 1.实例化axios
var service = axios.create({
timeout: 10 * 1000, //超时时间
baseURL: '', //基准路径
})
// 2.设置请求拦截器
service.interceptors.request.use(
(config) => {
// 设置请求头参数,发所有请求携带请求头,不写就会直接跳首页
config.headers['token'] = userinfoStore.userinfo.token;
return config;
},
(error) => {
return Promise.reject(error);
}
)
// 3.设置响应拦截器
service.interceptors.response.use(
(res) => {
if (res.data.code == 10119) {
// 删除过期token
userinfoStore.remove_userinfo()
// 跳转登录页
router.push('/login')
}
return res;
},
(error) => {
// 响应提示
if (error.response.status == 401) {
ElNotification({
message: '登录过期,请重新的登录',
type: 'error',
})
// 删除过期的token
userinfoStore.remove_userinfo()
// 跳转到登录页
router.push('/login')
} else if (error.response.status == 404) {
ElNotification.error({ message: '访问路径有误!' })
} else if (error.response.status == 500) {
ElNotification.error({ message: '服务器内部错误!'})
} else if (error.response.status == 503) {
ElNotification.error({ message: '服务器不可用' })
}
return Promise.reject(error)
}
)
export default service;
统一管理请求:再封装 api 文件夹下 index.js
一个请求封装成一个函数
导出每个函数,导入使用
使用的话,组件中导入后,调用接口方法即可
传统restful风格的:因为是拼接,所以不作为对象,直接传递即可获取
// api文件夹下,index.js
//导入设置过拦截器的axios实例对象
import service from '../utils/request'
//一个接口封装成一个函数
//查看快捷分类
export function index_catelist( payload = {} ){
return service.get('/api/index/catelist', { params: payload } );
}
//查看轮播图
export function banner_list( payload = {} ){
return service.get('/api/banner/list', { params: payload } );
}
//登陆
export function user_login( payload = {} ){
return service.post('/api/user/login', payload );
}
升级模块化:::
// index.ts 中引入请求模块里所有的请求
import * as banner from './banner'
import * as admin from './admin'
import * as pro from './pro'
// 集体导出,所有模块的接口
export default{
banner,
admin,
pro
}
// 导入axios封装好的service
import service from '@/utils/request'
//查看管理员列表
export function admin_list(payload = {}){
return service.get('/admin/admin/list', { params: payload } )
}
// 获取管理员信息
export function admin_detail(payload = {}){
return service.get('/admin/admin/detail',{
params:{payload}
})
}
// 添加管理员
export function admin_add(payload = {}){
return service.post('/admin/admin/add', payload)
}
// 管理员登录
export function admin_login(payload = {}){
return service.post('/admin/admin/login', payload)
}
// 修改管理员信息
export function admin_update(payload = {}){
return service.post('/admin/admin/update', payload)
}
// 删除管理员信息
export function admin_delete(payload = {}){
return service.post('/admin/admin/delete', payload)
}
使用:
// 命名导入( 按需导入 )
// import { index_catelist, banner_list, user_login } from './api'
// 集体导入到一个对象中:推荐
import * as service from './api'
//查看快捷分类
service.index_catelist().then((res)=>{
console.log(res.data);
})
//查看轮播图
service.banner_list().then((res)=>{
console.log(res.data);
})
//登陆
service.user_login({ loginname:'13611129070',password:'123456' }).then((res)=>{
console.log(res.data);
})