Vue - 封装Axios，并给每次请求加上加载动画
Vue - 封装Axios，并给每次请求加上加载动画
·
1. 准备
1.1 导入Element-UI
- 在项目中新建终端，输入以下命令：
npm install element-ui -S
- 在main.js中进行配置
import ElementUI from 'element-ui'; // 导入element-ui包
import 'element-ui/lib/theme-chalk/index.css'; // 导入样式
Vue.use(ElementUI); // 进行引用
1.2 导入axios
- 在项目中新建终端，输入以下命令：
npm install axios --save
- 在main.js中进行配置
import service from 'axios'
Vue.prototype.$axios = service
1.3 导入qs
- 在项目中新建终端，输入以下命令：
npm install qs
- 在main.js中进行配置
import qs from 'qs'
Vue.prototype.$qs = qs
引入上述3个库后，新建一个Request.js文件
2. 加载动画代码
import { Loading } from 'element-ui';
let loading;
let loadingNum = 0; // 内存中正在请求的数量
function startLoading() { // 打开加载动画
if(loadingNum == 0) {
loading = Loading.service({
lock: true,
text: '拼命加载中...',
background:'rgba(255,255,255,0.5)',
target: document.querySelector('.content')
})
}
loadingNum++;
}
function endLoading() { // 关闭加载动画
loadingNum--;
if(loadingNum <= 0) {
loading.close();
}
}
上述代码是加载动画的代码，大家可以单独在其他地方使用
3. 完整代码
import axios from 'axios';
import qs from 'qs'
import { MessageBox, Loading } from 'element-ui';
let loading;
let loadingNum = 0; // 内存中正在请求的数量
function startLoading() {
if(loadingNum == 0) {
loading = Loading.service({
lock: true,
text: '拼命加载中...',
background:'rgba(255,255,255,0.5)',
target: document.querySelector('.content')
})
}
loadingNum++;
}
function endLoading() { // 关闭加载动画
loadingNum--;
if(loadingNum <= 0) {
loading.close();
}
}
/*
baseURL：基本地址
所有发送到后端的请求都会经过这里，然后在访问的url前拼接上baseURL，从而获得真正的访问地址
举例： url: /request
经过这里后，与baseURL进行拼接，变成：baseURL/request
所以在使用封装的Axios时，url只需写baseURL后的地址即可
*/
const service = axios.create({
baseURL: process.env.API_ROOT, // 基本地址
responseType: 'json',
withCredentials: true, // 允许跨域设置，不然可能因为拿不到cookie而报错
timeout: 1000 * 10 // 设置请求超时时间，单位为毫秒
})
/*
环境的切换，可以根据不同的环境设置不同的请求基本地址
根据需要进行修改即可
*/
if (process.env.NODE_ENV == 'development') {
service.defaults.baseURL = 'http://192.168.74.1:8888/';
} else if (process.env.NODE_ENV == 'debug') {
service.defaults.baseURL = 'http://192.168.74.1:8888/';
} else if (process.env.NODE_ENV == 'production') {
service.defaults.baseURL = 'http://192.168.74.1:8888/';
}
// 请求拦截器
service.interceptors.request.use(
config => {
startLoading(); // 打开加载动画
if (config.meth === 'post' && !(config.data instanceof FormData)) {
config.data = qs.stringify(config.data, {
arrayFormat: 'repeat' // 后端要求传数组的时候做的设置
})
}
// 将token放到请求头中发送给服务器
if (window.localStorage.getItem('token')) {
config.headers.common['Access-Token'] = window.localStorage.getItem('token');
}
return config;
},
error => {
return Promise.error(error)
}
)
// 响应拦截器
service.interceptors.response.use(
response => {
endLoading(); // 关闭加载动画
/*
如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
否则的话抛出错误
*/
if (response.status === 200) {
return Promise.resolve(response.data);
} else {
return Promise.reject(response);
}
},
/*
服务器状态码不是2开头的的情况
要和后台统一的错误状态码
然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
*/
error => {
endLoading(); // 关闭加载动画
if (error && error.response && error.response.status) {
switch (error.response.status) {
case 401:
MessageBox({
message: '未授权，请重新登录',
type: 'error',
title: '提示'
})
break;
case 402:
MessageBox({
message: '登录过期，请重新登录',
type: 'error',
title: '提示'
});
break;
case 403:
MessageBox({
message: '拒绝访问',
type: 'error',
title: '提示'
});
break;
case 404:
MessageBox({
message: '网络请求不存在',
type: 'error',
title: '提示'
});
break;
case 405:
MessageBox({
message: '请求方法不允许',
type: 'error',
title: '提示'
});
break;
case 408:
MessageBox({
message: '请求超时，请稍后再试',
type: 'error',
title: '提示'
});
break;
case 429:
MessageBox({
message: '服务器繁忙，请稍后再试',
type: 'error',
title: '提示'
});
break;
case 500:
MessageBox({
message: '服务器端错误',
type: 'error',
title: '提示'
});
break;
case 501:
MessageBox({
message: '网络未实现',
type: 'error',
title: '提示'
});
break;
case 502:
MessageBox({
message: '网络错误',
type: 'error',
title: '提示'
});
break;
case 503:
MessageBox({
message: '服务不可用',
type: 'error',
title: '提示'
});
break;
case 504:
MessageBox({
message: '网络超时',
type: 'error',
title: '提示'
});
break;
case 50:
MessageBox({
message: 'http版本不支持该请求',
type: 'error',
title: '提示'
});
break;
// 其他错误，直接抛出错误提示
default:
MessageBox({
message: '服务器内部错误，请稍后再试',
type: 'error',
title: '提示'
});
}
return Promise.reject(error);
}
}
);
export default service;
4. 使用举例
注意上述代码的最后一句：“export default service”，意味着在引入上述JS文件中封装的Axios时，是以变量名“service”进行引用的
4.1 GET请求举例
import { MessageBox } from "element-ui";
import service from "../request"; // 修改为自己的地址
/*
异步模式
*/
export async function requestInitData(param) {
try {
const response = await service({
url: '自己的访问地址',
method: 'GET',
params: {
"参数1": param
}
});
console.log(response);
} catch (error) {
MessageBox({
title: '提示',
message: '请求失败失败，请稍后再试',
type: 'error'
});
}
}
4.2 POST请求举例
import { Message } from "element-ui";
import service from "../request"; // 修改为自己的地址
/*
异步模式
*/
export async function requestInitData(params) {
return service({
url: '自己的访问地址',
method: 'POST',
data: params,
headers: {'Content-type': 'application/x-www-form-urlencoded;charset=UTF-8'} // 按自己需求进行修改
}).then(response => {
console.log(response);
}).catch(error => {
Message.error('请求失败，请稍后再试');
})
}
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
5
0- 0
已为社区贡献4条内容
所有评论(0)