修改文件

index.js

import Ajax from './ajax.js';
// 常量
import {ERROR_HTTP_CODE,ERROR_REQUEST,ERROR_TIMEOUT,ERROR_ABORT,ERROR_HTTP_CODE_TEXT,ERROR_REQUEST_TEXT,ERROR_TIMEOUT_TEXT,ERROR_ABORT_TEXT
} from './constants.js';const ajax = (url, options) => {// return new Ajax(url, options).getXHR();let xhr;const p = new Promise((resolve, reject) => {xhr = new Ajax(url, {...options,...{success(response) {resolve(response);},httpCodeError(status) {reject({type: ERROR_HTTP_CODE,text: `${ERROR_HTTP_CODE_TEXT}: ${status}`});},error() {reject({type: ERROR_REQUEST,text: ERROR_REQUEST_TEXT});},abort() {reject({type: ERROR_ABORT,text: ERROR_ABORT_TEXT});},timeout() {reject({type: ERROR_TIMEOUT,text: ERROR_TIMEOUT_TEXT});}}}).getXHR();});p.xhr = xhr;p.ERROR_HTTP_CODE = ERROR_HTTP_CODE;p.ERROR_REQUEST = ERROR_REQUEST;p.ERROR_TIMEOUT = ERROR_TIMEOUT;p.ERROR_ABORT = ERROR_ABORT;return p;
};const get = (url, options) => {return ajax(url, { ...options, method: 'GET' });
};const getJSON = (url, options) => {return ajax(url, { ...options, method: 'GET', responseType: 'json' });
};const post = (url, options) => {return ajax(url, { ...options, method: 'POST' });
};export { ajax, get, getJSON, post };

constants.js

// 常量
export const HTTP_GET = 'GET';
export const CONTENT_TYPE_FORM_URLENCODED = 'application/x-www-form-urlencoded';
export const CONTENT_TYPE_JSON = 'application/json';export const ERROR_HTTP_CODE = 1;
export const ERROR_HTTP_CODE_TEXT = 'HTTP 状态码异常';
export const ERROR_REQUEST = 2;
export const ERROR_REQUEST_TEXT = '请求被阻止';
export const ERROR_TIMEOUT = 3;
export const ERROR_TIMEOUT_TEXT = '请求超时';
export const ERROR_ABORT = 4;
export const ERROR_ABORT_TEXT = '请求终止';

导入

 <script type="module">import { ajax, get, getJSON, post } from './ajax/index.js';const url = 'https://www.imooc.com/api/http/search/suggest?words=js';// const url = 'https://www.iimooc.com/api/http/search/suggest?words=js';const p = getJSON(url, {params: { username: 'alex' },data: { age: 18 }// timeoutTime: 10// success(){},error(){}});p.xhr.abort();const { ERROR_HTTP_CODE, ERROR_REQUEST, ERROR_TIMEOUT, ERROR_ABORT } = p;p.then(repsonse => {console.log(repsonse);}).catch(err => {// console.log(err);switch (err.type) {case ERROR_HTTP_CODE:console.log(err.text);break;case ERROR_REQUEST:console.log(err.text);break;case ERROR_TIMEOUT:console.log(err.text);break;case ERROR_ABORT:console.log(err.text);break;}});</script>

【仿旅游网站】使用Promise改造封装好的Ajax相关推荐

【仿旅游网站】Ajax封装
文章目录 "ajax封装"目录 ajax.js (Ajax类) default.js (存放默认参数 ) utils.js (工具函数) constants.js index.js ...
HTML期末作业-仿旅游景点介绍网站HTML模板(HTML+CSS+JavaScript)
HTML期末作业-仿旅游景点介绍网站HTML模板(HTML+CSS+JavaScript) 旅游景点介绍网站模板,全套模板,包括首页.历史.风景.旅游.美食.动态.留言.团队介绍.. 效果演示代码实 ...
清新iso7风格-仿格子微酒店触屏版html5手机wap旅游网站模板下载
为什么80%的码农都做不了架构师?>>> 清新iso7风格-仿格子微酒店触屏版html5手机wap旅游网站模板下载说明: 清新iso7风格-仿格子微酒店触屏版html5手机wap旅游 ...
仿途风网旅游网站/爱讯.NET程序敏捷开发框架
技术特点: 本系统采用PETSHOP抽象工厂三层架构,数据库兼容SQL SERVE 2008及Oracle等数据库,前台采用Jquery+Ajax+JqueryUI,并使用formValidator. ...
2016最新的旅游网站程序CMS系统优点和缺点对比分析
旅游网站或者旅行社网站建设,有着自己的独特性,比如旅游线路都是有团期的,必须可以按照每天天来单独报价,比如线路行程都是按天安排的,第一天玩哪里,第二天玩哪里,,发布线路的时候必须按每天天来,才逻辑清晰 ...
塞北村镇旅游网站设计（论文+PPT+源码）
此处为论文中文题目,要求居中填写主标题不超过24个汉字:可加副标题(副标题前加破折号),副标题与主标题间空一行的位置主标题:黑体,小二,居中副标题:楷体_GB2312,四号,居中阅后删除此文本 ...
基于java+SpringBoot+HTML+Mysql旅游网站设计与实现
详细功能设计:请点击下面链接查看基于java+SpringBoot+HTML+Mysql旅游网站设计与实现_哔哩哔哩_bilibili 源码+论文获取: 源码+论文获取请私信获取目录 Abstrac ...
【java毕业设计】基于javaEE+原生Servlet+MySql的村镇旅游网站设计与实现（毕业论文+程序源码）——村镇旅游网站
基于javaEE+原生Servlet+MySql的村镇旅游网站设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于javaEE+原生Servlet+MySql的村镇旅游网站设计与实现,文章末尾 ...
（附源码）node.js游云旅游网站毕业设计231547
云游旅游网站的设计与实现摘要信息化社会内需要与之针对性的信息获取途径,但是途径的扩展基本上为人们所努力的方向,由于站在的角度存在偏差,人们经常能够获得不同类型信息,这也是技术最为难以攻克的课题. ...

【仿旅游网站】使用Promise改造封装好的Ajax

文章目录

修改文件

index.js

constants.js

导入

【仿旅游网站】使用Promise改造封装好的Ajax相关推荐

最新文章

热门文章