- A+
所属分类：Web前端
主要使用以下文件
config.js：ajax 请求配置核心文件
loading.js：element-ui 请求加载动画
index.js：二次封装 config.js 请求并导出该方法，配置请求拦截器、响应拦截器
index.vue：调用 ajax 的示例页面
注意：推荐在 api 目录统一管理所有接口，如果遇到报错请调整正确引用路径
config.js
import loading from './loading.js'; // 加载动画类 const animation = false; // 接口加载动画 const intTimer = 10; // 接口请求超时时间（秒） class Config { constructor(data) { this.method = data.method; this.url = data.url; this.param = data.param || {}; this.header = data.header || {}; this.interceptors = data.interceptors; this.response = data.response; return this.filter(); } // 创建XHR对象 createXHR() { if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari return new XMLHttpRequest(); } else { // code for IE6, IE5 return new ActiveXObject('Microsoft.XMLHTTP'); } } // HTTP请求 xhrRequest(header, method, url, param, async, interceptors, response) { return new Promise(resolve => { var xhr = this.createXHR(); if (animation == true) { loading.requestStart(); // 执行动画 } // 请求拦截 if (interceptors({ header, method, url: this.url, param: this.param, async })) { xhr.open(method, url, async); xhr.timeout = 1000 * intTimer; //设置xhr请求的超时时间 Object.keys(header).map(key => { xhr.setRequestHeader(key, header[key]); }); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; application/json; charset=utf-8'); xhr.send(param); xhr.onreadystatechange = () => { if (xhr.readyState == 4 && xhr.status == 200) { loading.requestEnd(); // 结束动画 try { let data = JSON.parse(xhr.responseText); resolve(response(data, { header, method, url: this.url, param: this.param, async })); } catch (error) { console.log('接口返回没有任何信息!'); resolve(false); } } else { return 'request is unsucessful ' + xhr.status; } }; } else { console.error('request interceptor', '请求未发出, 请求拦截器已生效!'); } // 请求超时方法 xhr.ontimeout = function(e) { console.log('接口请求超时!'); loading.requestEnd(); // 结束动画 }; // 请求错误方法 xhr.onerror = function(e) { console.log('接口请求失败'); loading.requestEnd(); // 结束动画 }; }); } // 参数转换 convParams(param) { let mark = '?'; let hasMark = this.url.indexOf(mark) > 0; // 是否包含特殊字符 if (hasMark) { mark = '&'; } let newParams = ''; let i = 0; for (let key in param) { if (i > 0) { newParams += `&${key}=${param[key]}`; } else { newParams += `${mark}${key}=${param[key]}`; } i++; } return newParams; } // 数据GET、POST请求处理 filter() { let obj = { header: this.header, method: this.method, url: this.url, param: {}, async: true, interceptors: this.interceptors, response: this.response }; // 接口名称拼接位置：(1、url) (2、param) let newParams = this.convParams(this.param); if (this.method == 'GET') { obj.url += newParams; } else { newParams = newParams.replace('?', ''); obj.param = newParams; } return this.xhrRequest(obj.header, obj.method, obj.url, obj.param, obj.async, obj.interceptors, obj.response); } } export default Config; loading.js
import { Loading } from 'element-ui'; class animation { constructor() { this.needLoadingRequestCount = 0; this.loading } /** * 动画开始 */ requestStart() { if (this.needLoadingRequestCount === 0) { this.loading = Loading.service({ lock: true, text: 'loading...', background: 'rgba(0, 0, 0, 0.7)' }); } this.needLoadingRequestCount++; } /** * 动画结束 */ requestEnd() { if (this.needLoadingRequestCount <= 0) return; this.needLoadingRequestCount--; if (this.needLoadingRequestCount === 0) { this.loading.close(); } } } export default new animation() index.js
import Config from './config.js'; /** * 接口请求方法 * @func request * @param {Object} method 请求方式： 仅支持GET、POST * @param {String} url 请求地址 * @param {Object} param 请求参数 */ let request = option => { // 配置默认请求参数 return new Config({ header: { Authorization: 'APPCODE edc39cc1dc5f4c139498322115b99e51' }, method: option.method, url: option.url, param: option.param, interceptors: interceptors, response: response }); }; /** * 请求拦截器 * @func interceptors */ let interceptors = config => { return true; }; /** * 响应拦截器 * @func response */ let response = (data, config) => { let res; // 处理返回格式 if (data.res) { res = data.res; } else if (data.data) { res = data.data; } else { res = data; } return res; }; export default request; index.vue
<script> import request from './index.js'; export default { mounted() { new request({ method: 'GET', // 请求方式： GET、POST url: 'http://10.10.10.10/xxx/xxx', // 请求地址 param: {} // 请求参数 }).then(res => { console.log('res', res); }); } }; </script> 文章的内容/灵感都从下方内容中借鉴
-
【持续维护/更新 500+前端面试题/笔记】https://github.com/noxussj/Interview-Questions/issues
-
【大数据可视化图表插件】https://www.npmjs.com/package/ns-echarts
-
【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/
