之前我发布了一篇是有关于uniapp的接口简单封装,这次我发布的是vue的接口简单封装,这次有涉及到几个依赖,需要提前安装好,一个是axios依赖,一个是qs依赖,以下是安装方法:
npm install axios -S
npm install qs
安装完之后,就可以直接再也没中引入了,这次涉及到三个文件,一个是对axios的封装文件,即axios.js,一个是对接口的封装文件,即index.js,还一个是页面中引入文件的vue文件,即index.vue
- 接下来就是各个文件的代码和内容,首先是axios.js的代码如下:
import axios from 'axios';
import qs from 'qs';
import store from '@/store';
export default function $axios(options) {
return new Promise((resolve, reject) => {
const instance = axios.create({
// baseURL: '/api', // 这是跨域那边的设置的接口IP地址
baseURL: 'http://192.168.1.1:3000', // 这是写的你后台访问的IP地址
headers: {}
});
// request 拦截器
instance.interceptors.request.use(
config => {
// Tip: 1
// 请求开始的时候可以结合 vuex 开启全屏的 loading 动画
// Tip: 2
// 带上 token , 可以结合 vuex 或者重 localStorage
const token = store.getters.access_token;
if (token) {
config.headers['Authorization'] = 'bearer ' + token;
}
// if (store.getters.token) {
// config.headers['X-Token'] = getToken() // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
// } else {
// // 重定向到登录页面
// }
// Tip: 3
// 根据请求方法,序列化传来的参数,根据后端需求是否序列化
// if (config.method.toLocaleLowerCase() === 'post' ||
// config.method.toLocaleLowerCase() === 'put' ||
// config.method.toLocaleLowerCase() === 'delete') {
// config.data = qs.stringify(config.data);
// }
if (config.method.toLocaleLowerCase() === 'get') {
config.paramsSerializer = params => {
return qs.stringify(params, { arrayFormat: 'repeat' });
};
}
return config;
},
error => {
// 请求错误时做些事(接口错误、超时等)
// Tip: 4
// 关闭loadding
console.log('request:', error);
// 1.判断请求超时
if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {
console.log('根据你设置的timeout/真的请求超时 判断请求现在超时了,你可以在这里加入超时的处理方案');
// return service.request(originalRequest);//例如再重复请求一次
}
// 2.需要重定向到错误页面
const errorInfo = error.response;
console.log(errorInfo);
if (errorInfo) {
// error =errorInfo.data//页面那边catch的时候就能拿到详细的错误信息,看最下边的Promise.reject
const errorStatus = errorInfo.status; // 404 403 500 ... 等
router.push({
path: `/error/${errorStatus}`
});
}
return Promise.reject(error); // 在调用的那边可以拿到(catch)你想返回的错误信息
}
);
// response 拦截器
instance.interceptors.response.use(
response => {
// if (response.status === 200) {
// return Promise.resolve(response);
// } else {
// return Promise.reject(response);
// }
let data;
// IE9时response.data是undefined,因此需要使用response.request.responseText(Stringify后的字符串)
if (response.data == undefined) {
data = response.request.responseText;
} else {
data = response.data;
}
// 根据返回的code值来做不同的处理(和后端约定)
switch (data.code) {
case 401:
store.dispatch('LogOut').then(() => {
location.href = '/login';
});
break;
default:
}
// 若不是正确的返回code,且已经登录,就抛出错误
// const err = new Error(data.description)
// err.data = data
// err.response = response
// throw err
return data;
},
err => {
if (err && err.response) {
switch (err.response.status) {
case 400:
err.message = '请求错误';
break;
case 401:
break;
case 403:
err.message = '拒绝访问';
break;
case 404:
err.message = `请求地址出错: ${err.response.config.url}`;
break;
case 408:
err.message = '请求超时';
break;
case 500:
err.message = '服务器内部错误';
break;
case 501:
err.message = '服务未实现';
break;
case 502:
err.message = '网关错误';
break;
case 503:
err.message = '服务不可用';
break;
case 504:
err.message = '网关超时';
break;
case 505:
err.message = 'HTTP版本不受支持';
break;
default:
}
}
// console.error(err)
// 此处我使用的是 element UI 的提示组件
// Message.error(`ERROR: ${err}`);
return Promise.reject(err); // 返回接口返回的错误信息
}
);
//请求处理
instance(options)
.then(res => {
resolve(res);
return false;
})
.catch(error => {
reject(error);
});
});
}
- 接下来是接口封装的文件index.js文件,代码如下:
import axios from '@/api/axios.js';
// 分页获取获取站点列表
export function getSiteTable(query) {
return axios({
url: '/ebc/depot',
method: 'GET',
params: query
})
}
// 添加 - 站点
export function addSite(data) {
return axios({
url: '/ebc/depot',
method: 'POST',
data: data
})
}
// 修改 - 站点
export function putSite(data) {
return axios({
url: '/ebc/depot',
method: 'PUT',
data: data
})
}
// 删除 - 站点
export function delSite(siteId) {
return axios({
url: '/ebc/depot/' + siteId,
method: 'DELETE'
})
}
// 新增或修改 - 本地化站点信息
export function addOrPutSite(data) {
return axios({
url: '/ebc/companyDepot',
method: 'POST',
data: data
})
}
- 最后是页面中导入和使用对应的接口,代码如下:
<template>
<div>
你的内容
</div>
</template>
<script>
import { addPbc, putPbc, enablePbc, getPbcDetail, getPbcTable, delPbc } from '@/api/flightManage/index.js';
export default {
data(){
return{}
},
methods:{
// 获取计划班次列表 - 分页
getTable() {
this.tableLoading = true;
let temp = Object.assign(this.searchForm, this.page);
getPbcTable(temp)
.then((res) => {
let data = res;
if (data.code == 200) {
this.page.total = data.data.total;
this.tableData = [];
this.tableData.push(...data.data.records);
}
this.tableLoading = false;
})
.catch((err) => {
console.log(err);
this.tableLoading = false;
});
},
}
}
</script>
<style lang="scss" scoped>
</style>
以上就是接口的封装和使用,我也要说一下,这也是我自己写的,可能不够全面,网上大佬写的可能比我全面多了,我这个也只是仅供参考,大佬们不喜勿喷,在此感谢各位大佬!