在新开始的前端项目里肯定会用到ajax请求,这里手把手的教你封装一个通用的全局http模块
首先新建一个文件夹 作为一个"模块",如下:
然后继续创建文件:
index.js 如下:
/**
* 在这里导出你需要用到的api方法,apis里面的那些
*/
import apis from './wrapper';
/*
这里是方便看业务模块里有哪些方法,除了就没啥用了
var str = '';
Object.keys(apis).forEach((key) => {
// console.log(str += `,${key}`);
}); */
export const {
//test 业务模块
getTest,
postTest,
putTest,
deleteTest
} = apis;
interceptor.js //拦截器 此处用的loading和提示,如果用了其他的UI框架 自行修改即可,思路都一样的;
这里需要安装axios
npm i axios --save
muse-ui就不做详细介绍了,地址在这里https://muse-ui.org/
element-ui : http://element-cn.eleme.io/#/zh-CN/component/loading
npm i element-ui -S
/***
* Created by Simple on 2018/1/14 0014.
* Http请求控制器模块
* @description 后台返回数据如下 { code:200, data:[], msg:"success" }
*/
import axios from 'axios';
import router from '@/router/index';
import store from '@/store/index';
import conf from '@/common/base/config';
import { Loading, Message } from 'element-ui';
// axios 配置
axios.defaults.timeout = 15000; //请求超时
axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? conf.productionUrl : conf.devUrl; //api的基础地址
// axios.defaults.baseURL = '/apis';
// 配置通用请求动画
let loading = null;
axios.interceptors.request.use(config => {
config.headers.Authorization = store.getters.token;
loading = Loading.service({
lock: true,
text: '拼命加载中...',
background: 'rgba(255, 255, 255, 0)'
});
return config;
}, err => {
loading.close();
return Promise.reject(err);
});
// http response 拦截器
axios.interceptors.response.use(response => {
let data = {};
if (response && response.data) {
switch (Number(response.data.code)) {
case 200:
data = response.data;
break;
case 401: // 401 清除token信息并跳转到登录页面
Message.error({
message: '身份过期,请重新登录'
});
setTimeout(() => {
router.replace({
path: '/login',
query: { redirect: router.currentRoute.fullPath }
});
}, 1200);
break;
case 403: //无权限
router.replace({
name: '/403',
query: { redirect: router.currentRoute.fullPath }
});
break;
default:
Message.error({
message: response.data.msg
});
break;
}
}
loading.close();
return data;
}, error => {
loading.close();
Message.error({
message: '哎呀~ (ಥ﹏ಥ)网络又开小差了,请稍后刷新重试!'
});
return Promise.reject(error.response.data);
});
export default axios;
wrapper.js 内容如下:
/***
* Created by Simple on 2018/1/14 0014.
* mergedApis模块
*/
import axios from './interceptor';
import mergedApis from './apis';
const http = ({
url = '/', // DEFAULT_URL
method = 'get', // DEFAULT_METHOD
...rest // REST_CONFIGS { data, headers, ... } [OPTIONAL]
}) => axios({
url: `${url}`,
method,
...rest
});
export default (() => {
return Object
.keys(mergedApis)
.reduce((acc, apiKey) => {
return {
...acc,
[apiKey]: data => http(mergedApis[apiKey](data))
};
}, {});
})();
最后一个 再建一个apis文件夹(当然你也可以叫models);
到这里你已经完成80%的内容了:
接下来写apis里面的文件
apis/index.js 如下:
//在这里导入你的业务模块
import test from './test';
export default {
...test
};
apis/types.js 如下:
/**
* 常量文件
*/
//服务名
export const API_TEST = '/test';
apis/test.js 如下:
/**
* test 业务模块 1
*/
import { API_TEST } from './types';
export default {
/**
* get 方法
* @param {*} data
*/
getTest({ param }) {
return {
url: `${API_TEST}/api`,
method: 'get',
params: { param }
};
},
/**
* post 方法
* @param {*} data
*/
postTest(data) {
return {
url: `${API_TEST}/api`,
method: 'post',
data
};
},
/**
* put 请求
* @param {*} data
*/
putTest(data) {
return {
url: `${API_TEST}/api`,
method: 'post', //method: 'put'
data,
headers: { method: 'PUT' } //这里看公司的需求,有的是在headers里面自定义的,如果没有这需求直接 改 method: 'put' 即可
};
},
/**
* delete 请求
* @param {*} data
*/
deleteTest(data) {
return {
url: `${API_TEST}/api`,
method: 'post', //method: 'delete'
data,
headers: { method: 'DELETE' } //这里看公司的需求,有的是在headers里面自定义的,如果没有这需求直接 改 method: 'delete' ,移除headers即可
};
},
};
好了,基本的封装没有问题了 我们去测试一下呢
在你需要用到的组件里这样写:
<template>
<div></div>
</template>
<script>
import { getTest, postTest, putTest, deleteTest} from '@/http';
export default {
data() {
return {
queryData: {
param: '参数1'
}
};
},
created() {
this.init();
},
methods: {
async init() {
const { data } = await getYunDong();
if(data){
//to do
}
},
async post(){
const { code } = await postTest({ param: 1 });
if(code === 200){
//to do
}
},
async put(){
const { code } = await putTest({ param: 1 });
if(code === 200){
//to do
}
},
async delete(){
const { code } = await deleteTest({ param: 1 });
if(code === 200){
//to do
}
}
}
};
</script>
vue项目的http封装源码在这里: https://github.com/langyuxiansheng/MyProject/tree/master/http
应用于项目:https://github.com/langyuxiansheng/base-vueadmin-client/tree/master/src/http
好了快动手试试吧.有问题请留言或者@作者,谢谢支持o( ̄︶ ̄)o~