server.js
// 简单封装 Axios 练习
import axios from 'axios'
// 创建一个实例、默认url、超时
const instance = axios.create({
baseURL: 'http://47.104.64.44:8889/api/private/v1/',
timeout: 4000
})
// 拦截器 --请求拦截
instance.interceptors.request.use(config => {
//请求成功、部分接口需要拿到token
let token = sessionStorage.getItem('token')
if (token) { config.headers.Authorization = token }
return config
}, err => {
//失败
return Promise.reject(err)
})
// 拦截器 -- 响应拦截
instance.interceptors.response.use(res => {
return res
}, err => {
return Promise.reject(err)
})
//导出
export default instance
api.js
// 将封装的 axios请求导入
import server from './server'
// 按需到出每个请求
//请求首页数据
export const loginPost = (data) => server.post('login', data)
export const getUsers = (params) => server.get('users', params)
app.vue
<template>
<div>
<button @click="loginclick">登入post请求</button>
<button @click="getUser">get请求</button>
</div>
</template>
<script>
import { loginPost, getUsers } from "@/api/api";
export default {
data() {
return {};
},
methods: {
//登入post请求
async loginclick() {
const { data: res } = await loginPost({
username: "admin",
password: "123456",
});
window.sessionStorage.setItem("token", res.data.token);
},
//获取用户数据get请求(根据vue电商管理api来写的封装测试)
async getUser() {
const { data: res } = await getUsers({
params: {
query: '',
pagenum: 1,
pagesize: 5,
}
});
console.log(res.data.users);
},
},
};
</script>
<style scoped >
</style>
