在项目开发中对于 axios 的请求后台接口, 获取数据, 进行统一封装, 对结果进行
统一处理. 减少代码冗余, 方便维护, 废话不多说, 进入正题开始 axios 封装.
一, 设置请求体, 请求格式
http.JS 文件
- import axios from 'axios';
- import qs from 'qs';
- // 引入路由, 在结果返回时, 统一处理
- import * as Routers from '../routers';
- // 常用的 cookie 操作, 自定义, 这里就不贴出来了, 自己封装就好
- import { Cookie } from '../commons/tools';
- const http = axios.create({});
- // 设置请求格式
- http.defaults.headers = {
- 'Content-Type': 'application/json',
- };
- http.defaults.transformRequest = [
- (p, headers) => {
- const param = {
- ...p,
- };
- switch (headers['Content-Type']) {
- case 'application/x-www-form-urlencoded':
- return qs.stringify(param);
- case 'application/json':
- return JSON.stringify(param);
- default:
- return param;
- }
- },
- ];
- http.interceptors.response.use(
- (res) => {
- const rs = res.data;
- const rsType = ['code', 'status'];
- let isReturn = false;
- rsType.forEach((v) => {
- if (v in rs && rs[v] !== 0) {
- if (rs[v] === -9999) {
- // 如果请求接口 根据后台返回的状态进行统一处理
- Cookie.deleteCookie('sessionCode');
- sessionStorage.removeItem('UserInfo');
- localStorage.removeItem('UserInfo');
- sessionStorage.removeItem('sessionCode');
- localStorage.removeItem('sessionCode');
- const { origin, pathname } = Windows.location;
- Windows.location.href = `${origin}${pathname}#${Routers.Login}`;
- } else {
- throw rs;
- }
- } else {
- isReturn = true;
- }
- });
- if (isReturn) return rs.result || rs.data || null;
- return {};
- },
- (err) => {
- console.log(err);
- const success = false;
- return {
- success,
- err: ` 未知错误 ${err}`,
- };
- },
- );
- http.postForm = (
- url,
- data,
- config = {
- headers: {},
- },
- ) =>
- http.post(url, data, {
- ...config,
- headers: {
- 'Content-Type': 'application/x-www-form-urlencoded',
- ...config.headers,
- },
- });
- export default http;
请求格式封装完后, 中间有一层来调用统一的格式
-------------------------------------- 我就是史上最帅分割线, 不接受反驳 --------------------------
- // 这里贴出 AppConfig 里的方法
- // 设置请求参数, 此处的方法是获取本地 sessionCode, 登录时会往本地 sessionStrange 存储后台返回的 Token
- class AppConfig {
- static isLogin = (loginParamField) => {
- if (loginParamField) {
- return loginParamField !== '0';
- }
- return false;
- }
- // static sessionCode = () => Cookie.getCookie('sessionCode');
- static sessionCode = () => localStorage.getItem('sessionCode');
- static accountId = () => {
- if (Windows.localStorage.getItem('cache_UserInfo')) {
- return JSON.parse(Windows.localStorage.getItem('cache_UserInfo')).accountId;
- }
- return '';
- }
- }
- export default AppConfig;
-------------------------------------- 我就是史上最帅分割线, 不接受反驳 -----------------------------------------
- import HTTP from '../http'; // 引入上文的 http.JS 文件
- import AppConfig from '../../commons/app_config';// 引入 app_config.JS 文件
- // 定义统一的接口路径
- const getUserAddress = url => `${APP_CONFIG.URL}customer/${url}`;
- // 用户相关接口
- export default class UserApi {
- static queryBrokerageList(p) {
- return HTTP.post('此处应该是你的请求接口路径', { sessionCode: AppConfig.sessionCode(), ...p });
- }
- }
总结: 封装的方法返回数据的统一处理, 请求路径的统一维护, 减少代码的冗余, 方便复用,
更方便前后端数据的交互.
始终遵循一个原则: 一个方法, 我们只做一件事, 结构清晰透彻.
本案例可以直接使用, 实践才是检验真理的唯一标准, 如有不合理之处, 请各位大佬
多多指教.
来源: http://www.jianshu.com/p/0d529bff2345