[Axios] 基于Promise封装属于自己的Ajax库

基于Promise封装属于自己的Ajax库

自己封装ajax库

;(function anonymous(window) {//支持设置默认的参数配置项let _default = {method: 'GET',url: '',baseURL: '',headers: {},dataType: 'JSON',//POST系列请求基于请求主体传递给服务器的内容data: null,//GET系列请求基于问号传参传递给服务器的内容params: null,//设置缓存cache: true};//基于PROMISE设计模式管理AJAX请求let ajaxPromise = function ajaxPromise(options) {//OPTIONS中融合了:默认配置信息、用户基于DEFAULTS修改的信息、用户执行GET/POST方法时候传递的配置信息，越靠后的优先级越高let {url, baseURL, method, data, dataType, headers, cache, params} = options;//把传递的参数进一步进行处理if (/^(GET|DELETE|HEAD|OPTIONS)$/i.test(method)) {//GET系列if (params) {url += `${ajaxPromise.check(url)}${ajaxPromise.formatData(params)}`;}if (cache === false) {url += `${ajaxPromise.check(url)}_=${+(new Date())}`;}data = null;//GET系列请求主体就是什么都不放} else {//POST系列if (data) {data = ajaxPromise.formatData(data);}}//基于PROMISE发送AJAXreturn new Promise((resolve, reject) => {let xhr = new XMLHttpRequest;xhr.open(method, `${baseURL}${url}`);//如果HEADERS存在,我们需要设置请求头if (headers !== null && typeof headers === 'object') {for (let attr in headers) {if (headers.hasOwnProperty(attr)) {let val = headers[attr];if (/[\u4e00-\u9fa5]/.test(val)) {//VAL中包含中文:我们把它进行编码//encodeURIComponent/decodeURIComponentval = encodeURIComponent(val);}xhr.setRequestHeader(attr, val);}}}xhr.onreadystatechange = () => {if (xhr.readyState === 4) {if (/^(2|3)\d{2}$/.test(xhr.status)) {let result = xhr.responseText;dataType = dataType.toUpperCase();dataType === 'JSON' ? result = JSON.parse(result) : (dataType === 'XML' ? result = xhr.responseXML : null);resolve(result);return;}reject(xhr.statusText);}};xhr.send(data);});};//把默认配置暴露出去,后期用户在使用的时候可以自己设置一些基础的默认值(发送AJAX请求的时候按照用户配置的信息进行处理)ajaxPromise.defaults = _default;//把对象转换为URLENCODED格式的字符串ajaxPromise.formatData = function formatData(obj) {let str = ``;for (let attr in obj) {if (obj.hasOwnProperty(attr)) {str += `${attr}=${obj[attr]}&`;}}return str.substring(0, str.length - 1);};ajaxPromise.check = function check(url) {return url.indexOf('?') > -1 ? '&' : '?';};//GET['get', 'delete', 'head', 'options'].forEach(item => {ajaxPromise[item] = function anonymous(url, options = {}) {options = {..._default,//默认值或者基于defaults修改的值...options,//用户调取方法传递的配置项url: url,//请求的URL地址(第一个参数:默认配置项和传递的配置项中都不会出现URL，只能这样获取)method: item.toUpperCase()//以后执行肯定是ajaxPromise.head执行，不会设置METHODS这个配置项，我们自己需要配置才可以};return ajaxPromise(options);};});//=>POST['post', 'put', 'patch'].forEach(item => {ajaxPromise[item] = function anonymous(url, data = {}, options = {}) {options = {..._default,...options,url: url,method: item.toUpperCase(),data: data};return ajaxPromise(options);};});window.ajaxPromise = ajaxPromise;
})(window);

测试

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>测试</title>
</head>
<body>
<script src="js/ajaxPromise.js"></script>
<script>//DEFAULTajaxPromise.defaults.baseURL = 'https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp';//SEND//GET1ajaxPromise.get('/list').then((result) => {console.log(result);});//GET2ajaxPromise.get('/info', {params: {id: 1000},cache: false}).then((result) => {console.log(result);});//POSTajaxPromise.post('/add', {name: 'xxx',age: 9}, {headers: {'content-type': 'x-www-form-urlencoded'}}).then((result) => {console.log(result);});
</script>
</body>
</html>

[Axios] 基于Promise封装属于自己的Ajax库相关推荐

原生 Ajax 封装和 Axios 二次封装
AJAX 异步的JavaScript与XML技术( Asynchronous JavaScript and XML ) Ajax 不需要任何浏览器插件,能在不更新整个页面的前提下维护数据,但需要用户允 ...
ajax封装，promise封装ajax，axios封装
一.概念 ajax: 核心XMLHttpRequest ,在不重新加载整个页面的情况下更新部分数据 promise: 承诺,只有三种模式( pending:执行状态.fulfilled:已成功.rej ...
简单理解XHR、Ajax、Axios、Promise
什么是异步请求? 请求:客户端向服务器请求数据! 无异步请求:在完整网页上发送任何请求,都会导致整个页面的全部刷新! 有异步请求:可以实现网页的局部刷新! 如何查看网页的异步请求(XHR)? F12= ...
Promise 的基本使用与 Ajax的jQuery封装
Promise 的基本使用为了解决回调地狱问题,从而给出的解决办法: /*** Promise** 1. Promise 是一个构造函数 new Vue()* 2. Promise() 里面有个参 ...
小程序公共封装ajax,超简单 Promise封装小程序ajax 超好用以及封装登录
//网络类 //封装网络请求 const ajax = (ajaxData, method) => { wx.showLoading({ title: '加载中', mask: true }); ...
分享：用promise封装ajax
用promise封装ajax var ajaxOptions = {url: 'url',method: 'GET',async: true,data: null,dataType: 'text', ...
promise ajax 队列,ES6中的promise，从使用promise封装ajax说起
1为啥要用promise? js是单线程的,理论上所有代码都是同步的,从上到下一行行执行.然而就这样傻傻解析运行js的话,碰到较重的任务时,会阻塞进程,如发送一个用户是否登录验证请求,请求完成响应之前 ...
使用promise封装ajax
// Promise 封装 ajax function fetch(method, url, data){return new Promise((resolve, reject) => {var ...
promise封装Ajax案例淘宝猜你喜欢
目录显示: div部分: css部分: JS部分: 1.promise封装Ajax部分: 2.显示网页js部分: 数据部分: 显示: div部分: <div class="box&q ...

[Axios] 基于Promise封装属于自己的Ajax库

基于Promise封装属于自己的Ajax库

[Axios] 基于Promise封装属于自己的Ajax库相关推荐

最新文章

热门文章