前言
提示：这里可以添加本文要记录的大概内容：
在前端项目中，ajax/axios是必不可少的前后端交互数据的请求库，项目基本上也要对其做一些全局的配置来更好的服务项目。本篇就axios一些基本的配置信息做下总结。
提示：以下是本篇文章正文内容，下面案例可供参考
一、安装并引入axios
1.安装axios
cnpm install axios
2.在项目中创建一个配置js文件并引入axios
- 创建的文件位置如图所示
- 在js文件中导入axios
import axios from 'axios';
二、axios的配置
- 创建实例
//通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
let baseURL = process.env.NODE_ENV === 'development' ? '/' : window.CUIT_server.API_ROOT;
//`timeout` 指定请求超时的毫秒数,如果请求时间超过了 `timeout` 的时间，请求将被中断
let timeout = window.CUIT_server.TIMEOUT;
//使用自定义配置新建一个 axios 实例
let http = axios.create({
baseURL,
timeout: 1000000,
// `headers` 是即将被发送的自定义请求头
headers: {
'Content-Type': 'application/json'
// Authorization: 'Bearer ' + sessionStorage.getItem('token')
}
});
- 添加请求拦截器
http.interceptors.request.use(
function (config) {
//请求开始时页面统一的加载转圈效果
globalLoading.showFullScreenLoading();
return config;
},
function (error) {
return Promise.reject(error);
}
);
- 添加响应拦截器
http.interceptors.response.use(
function (response) {
//响应300ms后，隐藏加载转圈效果
setTimeout(() => {
globalLoading.tryHideFullScreenLoading();
}, 300);
if (response.data.code == 3) {
router.push({
path: '/' });
}
let token = sessionStorage.getItem('token');
if (token == 'null') {
if (window.location.hash == '#/forgotPassword') {
router.push({
path: '/forgotPassword' });
} else {
router.push({
path: '/' });
}
}
return response;
},
function (error) {
globalLoading.tryHideFullScreenLoading();
return Promise.reject(error);
}
);
三、导出http实例并在项目入口文件中导入
- 在axiosInterceptor.js中导出http实例
export default http;
- 在main.js中引入
import axiosHttp from './api/axiosInterceptor';
- 在main.js中进行全局配置
Vue.prototype.$axios = axiosHttp;
总结
axios在项目中的配置可以更加的丰富多彩，这需要看项目的实际需要了。配置的操作步骤主要就以下几步：
- 用npm或cnpm下载axios
- 创建一个专门配置axios的文件夹，导入axios，并做相关的配置
- 导出配置的js文件，并且在main.js(项目入口文件)文件中引入，进行全局的配置