欢迎点击领取 -《前端面试题进阶指南》:前端登顶之巅-最全面的前端知识点梳理总结
第一步:配置axios
首先,创建一个request.js,这里面存放的时axios的配置以及拦截器等,最后导出一个axios对象。这里你也可以使用自己的UI库(本文章使用的是element-ui)。
util/request.js 文件
import Vue from 'vue';
import axios from 'axios'
import router from '@/router/router.js'
import Cookies from "js-cookie";
const that = new Vue();
const h = that.$createElement;
function stringfiy(url) {
if (!url) return false;
return Object.entries(url)
.map(item => `${item[0]}=${item[1]}`)
.join("&");
}
const CODE_MESSAGE = {
200: '服务器成功返回请求的数据。',
201: '新建或修改数据成功。',
202: '一个请求已经进入后台排队(异步任务)。',
204: '删除数据成功。',
400: '发出的请求有错误,服务器没有进行新建或修改数据的操作。',
401: '用户没有权限(令牌、用户名、密码错误)。',
403: '用户得到授权,但是访问是被禁止的。',
404: '发出的请求针对的是不存在的记录,服务器没有进行操作。',
406: '请求的格式不可得。',
410: '请求的资源被永久删除,且不会再得到的。',
422: '当创建一个对象时,发生一个验证错误。',
500: '服务器发生错误,请检查服务器。',
502: '网关错误。',
503: '服务不可用,服务器暂时过载或维护。',
504: '网关超时。',
}
// create an axios instance
const service = axios.create({
baseURL: `//${location.hostname}/api/api-prefix`,
timeout: 15000,
withCredentials: true, // 允许跨域 cookie
})
// 添加一个请求拦截器
service.interceptors.request.use(
config => {
// 在请求发送之前做一些事
if (Cookies.get('user-token')) {
config.headers.Authorization = Cookies.get('user-token') // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
}
return config
},
error => {
Promise.reject(error)
}
)
// 再添加一个返回拦截器
service.interceptors.response.use(
response => {
return response.data;
},
error => {
if (error.response && CODE_MESSAGE[error.response.status]) {
that.$notify.error({
title: `请求错误 ${error.response.status}`,
message: h('div', [
h('div', CODE_MESSAGE[error.response.status]),
h('div', error.response.config.url),
]),
});
} else {
that.$message.error("系统开小差啦,请联系技术小哥哥哦~")
}
return Promise.reject(error)
}
)
/**
* @param {string} url 请求url地址
* @param {object} params 请求携带参数
* @param {string} method 请求方式
* @param {object} option status: 判断返回状态的值, messageText: 成功信息提示, messageErr: 失败信息提示
* @description 请求信息封装使用
*/
const request = async (url, params, method = 'get', option = {}) => {
const { status, messageText, messageErr } = option || {};
const data = await service[method](method === 'get' ? (url + '?' + stringify(params)) : url, params);
// 根据后端定义的去写
if (status === 'response' && data.status === '1') return data; // 获取所有数据并且是成功的状态
if (status === 'status') return getStatusData(data, messageText, messageErr) // 处理弹框status的信息
if (data.status === '1') return data.data // 默认只返回数据data
if (data.code === 100052 && data.success === false) return router.push({ path: '/reject/index' }); // 无权限,重定向到401页面
}
const getStatusData = (data, messageText, messageErr) => {
if (data.status === '1') {
messageText !== 'isShow' ? that.$message({
type: 'success',
showClose: true,
message: messageText || OPERATION_SUCCESS,
}) : null;
return data.data;
} else {
that.$message({
type: 'error',
showClose: true,
message: (messageErr || OPERATION_ERROR) + ',' + data.message
});
return data.data;
}
}
export {
request
}
第二步:使用
// api 统一管理文件
const api = {
list: () => '/manager/getConfigsByProductId', // 获取列表信息
}
const getDataList = (params = {}) => request(api.list(), params, 'post', 'response');
export default {
getDataList
}
// vue 当前单页面
import api from '@/api/api.js'
const method = {
// 获取列表信息内容
async getDataList() {
const res = await api.getDataList({ current: 1, pageSize: 20 })
this.datalist = (res && res.data) || []
this.dataTotal = (res && res.total) || 0
}
}