前言
最近在构建项目时，想到了请求的封装，之后就琢磨如何封装才好。虽然对各位大佬来说可能是个小事情，但对我来说也算是一个小小的挑战。在我设想中请求的一些基本配置与具体接口应该放于两个文件，因此我新建了两个文件 axios.js与api.js
axios.js
axios.js主要是针对axios的一些基本配置： baseURL 请求拦截器 响应拦截器 等等
import axios from 'axios'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import router from '../router';
首先在当前js中引入axios，引入element是为了在当前js内可以使用其组件，目的是为了在响应拦截器中对各种返回值进行直接提示。引入router的为了在响应拦截器中根据具体返回值来进行页面跳转，比如没有权限则跳转到登录页面
if (process.env.NODE_ENV === 'development') {
axios.defaults.baseURL = 'api';
} else if (process.env.NODE_ENV === 'production') {
axios.defaults.baseURL = 'https://xxxxxxxxxx/index/';
}
对于baseURL的处理，我区分了开发环境与生产环境
//请求拦截器 区分了一下正常请求时与发送formdata时的请求头
axios.interceptors.request.use((config) => {
config.headers['Content-Type'] = 'application/json';
if (config.method === 'post') {
//FormData时的请求头
if (Object.prototype.toString.call(config.data) === '[object FormData]') {
// 请求拦截器处理
config.headers['Content-Type'] = 'multipart/form-data';
} else if (Object.prototype.toString.call(config.data) === '[object String]') {
config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
}
} else {
config.headers['Content-Type'] = 'application/json';
}
return config;
});
//响应拦截器
axios.interceptors.response.use(
(config) => {
let value = config.data;
if (config.status && config.status === 200) {
if (typeof value === 'string') {
if (value === 'timeout') {
ElementUI.MessageBox.confirm('太长时间没有操作或操作没有权限，请进入登录页面重新登录?', '提示', {
confirmButtonText: '确定',
type: 'warning'
}).then(() => {
router.push({ name: 'login' });
});
}else {
ElementUI.Message.info(value);
}
}
}
return config;
},
(err) => {
let value = err.response.statusText;
switch (err.response.status) {
case 400:
ElementUI.Message.error('语法格式有误，服务器无法理解此请求')
break;
case 401:
case 403:
case 404:
case 405:
ElementUI.Message.warning(value);
break;
default:
ElementUI.Message.error('操作过程出错，此次操作无效！' value);
break;
}
return err.response
}
);
对于响应拦截器，我这边是根据自己后端返回的值来处理，因为没怎么弄过后端所以只是对返回简单处理了一下
下面是对get与post的一个封装
export async function axiosGet(url, params = {}) {
let res = await axios.get(url, { params: params });
if(res.status === 200){
return res.data
}else {
throw res.statusText
}
}
export async function axiosPost(url, params = {}) {
let res = await axios.post(url, params);
if(res.status === 200){
return res.data
}else {
throw res.statusText
}
}
使用async与await 直接取到返回值进行判断，如果返回成功则输出返回值 如果不成功则抛出错误
最后将封装的方法导出
api.js
整个api.js是项目内所有接口存放的地方
import { axiosGet,axiosPost } from './axios'
引入axios.js，获取到封装的axiosGet与axiosPost
export default {
getLogin:(params = {}) => {
return axiosPost('/login', params)
},
getUser:(params = {}) => {
return axiosGet('http://localhost:3000/user', params)
}
}
这里我使用简单的两个接口来做示例，在api.js中的处理就已经完成了
使用配置好的接口
到这里我们的axios已经封装完毕，接下来就是使用的演示了
import DbauditServer from '@/server/api'
//在要调用接口的文件中引入api.js
let formData = new FormData
formData.append('password', this.formLabelAlign.password)
let res1 = await DbauditServer.getLogin(formData) //直接调用就可以正常使用了
let res2 = await DbauditServer.getUser()
当然还可以细致一些，因为之前封装get与post的时候遇到错误返回值是直接抛出，因此，接口的调用也可以使用try catch来包裹，对error进行特定的处理即可。
总结
到此这篇关于axios的简单封装以及使用的文章就介绍到这了,更多相关axios简单封装内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！