今天来简单的做一下axios封装
- 首先安装axios
npm install axios -- save
- 然后在
src文件夹下创建一个名为utils文件夹, 在utils文件夹下创建一个request.js的js文件
image.png
然后进行import引入
import axios from 'axios'
import {Message} from 'element-ui' // 项目用的element ui
import router from '../router'
- 接着创建实例
const service = axios.create({
timeout: 7000, // 超过7秒提示超时
baseUrl: 'https://www.baidu.com'
})
- 然后设置请求拦截器
// 请求拦截器
service.interceptors.request.use(
config => {
if(localStorage.token) {
config.headers.token = localStorage.token;
}
return config;
},
error => {
console.log(error);
return Promise.reject(error);
}
)
- 然后设置响应拦截器
注: 响应去判断后台返回的状态码, 是要你们自己去跟后台去协商, 是什么字段, 协商好才能写
// 响应拦截器
service.interceptors.response.use(
response => {
// 接收后台参数状态
const res = response.data;
if(res.code == 20000 || res.status == 200 || res.success || res.ErrorCode == 20000) {
return res;
}else {
let message = (res.error && res.error.message) || res.message || res.msg || '未知错误';
Message({
message,
type: 'error',
duration: 5 * 1000
});
console.log('拦截器打印错误:', res);
// 这里可以设置后台返回状态码是500或者是其他,然后重定向跳转
// if(res.ErrorCode == 500) {
// router.push('/login')
// }
return Promise.reject(
new Error(res.message || (res.error &&res.error.message) || '未知错误')
);
}
},
error => {
console.log('服务器错误信息:', error);
if(error.response) {
// error.response有错误信息,是接口错误,不是取消请求
// 获取错误码,弹出提示信息,reject()
let code = error.response.status;
if(res.code == 401) {
// router.push('/login');
return Promise.reject(
new Error('登录过期,请重新登录')
);
}
Message({
message: '服务器繁忙, 请稍后再试! ' + code,
type: 'error',
duration: 3 * 1000
});
return Promise.reject(error.message);
}else {
// 是取消请求
// 直接reject
return Promise.reject(error.message);
}
}
)
export default service;
- 完整的request.js文件
import axios from 'axios'
import {Message} from 'element-ui' // 项目用的element ui
import router from '../router'
const service = axios.create({
timeout: 7000, // 超过7秒提示超时
baseUrl: 'https://www.baidu.com'
})
// 请求拦截器
service.interceptors.request.use(
config => {
if(localStorage.token) {
config.headers.token = localStorage.token;
}
return config;
},
error => {
console.log(error);
return Promise.reject(error);
}
)
// 响应拦截器
service.interceptors.response.use(
response => {
// 接收后台参数状态
const res = response.data;
if(res.code == 20000 || res.status == 200 || res.success || res.ErrorCode == 20000) {
return res;
}else {
let message = (res.error && res.error.message) || res.message || res.msg || '未知错误';
Message({
message,
type: 'error',
duration: 5 * 1000
});
console.log('拦截器打印错误:', res);
// 这里可以设置后台返回状态码是500或者是其他,然后重定向跳转
// if(res.ErrorCode == 500) {
// router.push('/login')
// }
return Promise.reject(
new Error(res.message || (res.error &&res.error.message) || '未知错误')
);
}
},
error => {
console.log('服务器错误信息:', error);
if(error.response) {
// error.response有错误信息,是接口错误,不是取消请求
// 获取错误码,弹出提示信息,reject()
let code = error.response.status;
if(res.code == 401) {
// router.push('/login');
return Promise.reject(
new Error('登录过期,请重新登录')
);
}
Message({
message: '服务器繁忙, 请稍后再试! ' + code,
type: 'error',
duration: 3 * 1000
});
return Promise.reject(error.message);
}else {
// 是取消请求
// 直接reject
return Promise.reject(error.message);
}
}
)
export default service;
- 最后在
src文件夹下创建api文件夹,在api文件夹下创建一个api.js的js文件
image.png
然后import引入我们的request方法
import request from '@/utils/request'
在里面定义baseUrl
const baseUrl = 'https://www.baidu.com';
最后去写一个接口请求方法
export function login(data) {
return request({
url: baseUrl + `/admin/user/login`,
method: 'post',
data
})
}
- 完整的api.js文件
import request from '@/utils/request' // 引入封装的request.js文件
const baseUrl = 'https://www.baidu.com'; // 设置环境接口的域名
// 暴露出我们的接口请求,export导出
export function login(data) {
return request({
url: baseUrl + `/admin/user/login`,
method: 'post',
data
})
}
- 然后我们去请求接口
先创建一个login.vue文件
<template>
<div class="login">
<div class="login-box">
<div class="login-header">欢迎登录个人知识库</div>
<div class="account-number">
<span class="from-label">账号</span>
<el-input v-model="user.account" placeholder="请输入用户账号"></el-input>
</div>
<div class="account-psd">
<span class="from-label">密码</span>
<el-input v-model="user.PassWord" placeholder="请输入用户密码"></el-input>
</div>
<div class="account-footer">
<el-button type="primary" @click="handleSubmit">登 录</el-button>
<span class="forget-pwd" @click="handleForgetPwd">忘记密码?</span>
</div>
</div>
</div>
</template>
<script>
import {login} from '@/api/api'; // 引入我们的api接口文件,花括号里面是我们暴露出来的login接口方法
export default {
data() {
return {
user: {}
}
},
created() {
},
methods: {
// 登录
handleSubmit() {
login({
UserName: this.user.account,
PassWord: this.user.PassWord
}).then(res => {
console.log(res)
// this.$alert('恭喜你登录成功了,但是我只写了这一个网页,要不你再登录一下?', '', {
// confirmButtonText: '确定'
// });
this.$message.success('登录成功');
this.$router.push({
name: 'layout'
})
})
},
// 忘记密码
handleForgetPwd() {
this.$alert('请先注册', '', {
confirmButtonText: '确定'
});
}
}
}
</script>
这样就完成啦,对你有帮助的话点个赞哦
