在工作中，我们所使用的框架都会搭配axios请求库，我们一般基于项目的请求操作和返回结果进行二次封装axios以此去适应不同的项目请求场景，接下来我们来实现一下
二次封装axios
首先我们要引入axios，引入之后我们设置好请求返回结果的提示语
const MESSAGE = Object.freeze({ token: '凭证已过期，请重新登录', login: '账号已在其他地方登录，请重新登录', registerSuccess: '您已注册成功，请前往登录', registerReject: '账号已注册,请前往登录' })
在设置一下axios的基本配置，baseURL一般都是配合webpack的环境变量实现的，我们这里就直接写上，在写一个请求超时取消时间，需要注意后面配置会覆盖前面的相同配置
const AXIOSOPTION = { // 用于发送请求时添加请求前缀 baseURL: 'http://xxxx.com/api', // 请求超时时间 timeout: 5000 } //还可以设置默认配置 axios.defaults.headers.TOKEN = AUTH_TOKEN;
声明获取token方法
// 获取token function getToken() { return localStorage.getItem('token'); }
创建一个axios实例，把我们刚自定义配置传递进去
const serve = axios.create(AXIOSOPTION);
声明一个请求拦截器，请求拦截器中可以做一些我们现在请求发送之前做的一些事情，这里我就通过获取token方法判断token是否存在，存在则携带在请求头中，在进行继续发送请求，如果在请求前发生错误则进行抛出错误阻止往下进行
// 请求拦截器 serve.interceptors.request.use((config) => { const TOKEN = getToken(); if (TOKEN) { config.headers['Token'] = TOKEN; } return config; }, (error) => { return Promise.reject(error); });
声明一个响应拦截器，对于请求返回的数据需要进行判断状态码，根据对应的状态码进行不同的操作，状态为0则正常返回数据，不是则根据状态码的不同给出相应的提示和操作，如果请求出错，则进行抛出错误
// 响应拦截器 serve.interceptors.response.use((response) => { const { code, data } = response; switch (code) { case '0': return data; break; case '1': console.log('数据获取失败'); return data; break; case '1100': // 重新登录操作 alert(MESSAGE.login) break; case '1200': //用户凭证失效 alert(MESSAGE.token) break; case '1300': //用户注册成功 alert(MESSAGE.registerSuccess) break; case '1300': //用户登录提示 alert(MESSAGE.registerReject) break; } // 对响应数据做点什么 return response; }, (error) => { // 对响应错误做点什么 return Promise.reject(error); });
封装请求方法
axios库经过二次封装后，在进行封装请求并导出，便于使用，这里只封装get和post请求，其他请求操作也可以照此封装和导出
export function GET(url, data) { return serve({ url, method: 'get', data }) } export function POST(url, data) { return serve({ url, method: 'post', data }) }
使用
将封装后的get和post请求方法导入并声明一个API常量，通过原生的
Object.freeze方法进行冻结API常量的指向对象，以此防止后面操作去修改对象里面的值，API常量对象中存放的是接口地址， 如果使用该接口则使用API.的语法进行获取到对应的接口地址并封装在函数中且导出，这样便于后期管理接口
import { GET, POST } from './axios' const API = Object.freeze({ login: '/login', //登录 home: '/home',//获取首页数据 }) export function Login(data = {}) { return POST(API.login, data) } export function getHome(data = {}) { return GET(API.home, data) }
在将封装后的接口请求导入进入到使用的页面中，进行使用并传递参数，由于接口请求后会返回一个promise对象，所以我们这里用promise的then方法捕获接口请求成功且进行处理，使用catch方法捕获接口请求报错或失败且进行处理
import { Login, getHome } from './api' // 登录操作 function userLogin(query) { const { userName, passWord } = query; Login({ userName, passWord }).then(R => { const { code, data } = R; if (!data.length || code != 0) return; // 对数据的进行操作 }).catch(error => { throw new Error(error); }) } // 获取首页数据 function getHome(){ getHome().then(R => { const { code, data } = R; if (!data.length || code != 0) return; // 对数据的进行操作 }).catch(error => { throw new Error(error); }) }
坚持努力,无惧未来！
