ajax封装promis请求，原生


//promise封装Ajax
// 创建ajax的四个步骤
// 1.创建ajax对象
var xhr = new XMLHttpRequest();
// 兼容IE低版本浏览器
xhr = new ActiveXObject('Microsoft.XMLHTTP');
// 2,监听ajax状态变化
xhr.onreadystatechange = function(){}
// 3,建立服务器连接
xhr.open('请求方式，请求路径，是否异步');
// 4,发起请求
xhr.send(null);let api={// get请求方法get(){return new Promise((reslove,reject)=>{创建ajaxlet xhr = null;if(window.XMLHttpRequest){// 如果有的话，创建一个ajax对象xhr = new XMLHttpRequest();}else{// 如果没有的话// 为IE低版本兼容xhr= new ActiveXObject('Microsoft.XMLHTTP')}// 监听ajax对象状态的变化xhr.onreadystatechange=function(){// 如果ajax对象的状态为4且状态码为200if(this.readyState == 4&&this.status==200){// 成功凝固结果reslove(this.responseText);}}// 开始建立服务器连接xhr.open('GET','http://api/',true);// 发起请求xhr.send(null);})}
}api.get().then(res=>{console.log(res);
}).catch(rej=>{console.log(rej)
})// -----------------------// es6 类的创建
class Lei{// 构造器constructor(name,color){this.name=name;this.color=color;}// 方法getName(){console.log(this.name);}
}
// 创建实例
let cat = new Lei('猫',"白色");
console.log(cat);
// 调用类的属性， cat.name
// 调用类的方法，cat.getName// class继承
// 定义父类
class Fu{constructor(x,y){this.x=x;this.y=y;}xy(){console.log(this.x+this.y);}
}// 定义子类，子类继承了父类的属性和方法
class Zi extends Fu{// 重写父类的构造器constructor(x,y,name){//    调用父类的构造器 super(x,y); //调用父类的属性，x,ythis,name=name; }// 重写父类的方法xy(){console.log('子类重写了父类的方法');}// 扩展自身的方法getName(){console.log('扩展了自身的方法');}
}let c = new Zi(3,4);
c.xy();
console.log(c.name);// ------------------// gitbash命令工具 ， 是一个继承git命令的工具 $ cd /d  切换盘符$ ls 查看当前盘的所有文件$ cd ./home 进入相对于当前路径的文件夹$ cd .. 跳出文件夹，其中。。表示一个文件夹，上一级$ cd ../.. 跳出两个文件夹$ touch home.js 创建一个文件home.js$ mkdir index 创建一个文件夹 index$ rm home.js 删除一个home.js文件$ mv index.html  index/index.html  把index.html放到 index文件夹中
$ mv home.css myhome.css 把home.css改成myhome.css
$ cat myhome.css 查看文件
$ vim myhome.css 编辑文件
在英文输入法下，按i健，进入编辑模式
按esc健 ，退出编辑模式。输入“:wq” 保存 输入“:q!” 不保存
$ clear 清除命令行
$ cd ~ 回到最初始的路径// --------------------------less 是一门css预处理语言,依赖node.js运行环境
在node环境下，
$ npm i less -g    //安装less
// -g 全局安装
lessc -v //查看版本
less的文件名 index.less
less的变量  变量可以共用
@fc:blue;
.title{color:@fc;
}
.box{background-color:@fc;
}编译less文件，在node的环境下，输入一下命令，将index.less文件编译成css文件
lessc ./index.less ./index.css编译less文件，压缩版，去掉空格空隙，封号等，体机更小
lessc -x ./index.less ./inde.css但是每次在调式的时候，都需要编译一下less文件为css文件才能调式？太麻烦了！
在vscode安装less自动编译插件可以解决这个问题！
搜索扩展商店搜索easy-less
然后在vscode的设置里配置less编译输出路径，settins.json中，加入
"less.compile":{//压缩"compress": true,//输出扩展名"outExt": ".min.css",//输出文件路径，工作空间的更目录\\路径"out":"${workspaceRoot}\\css\\"
}open in browser vscode安装，在默认浏览器打开文件less变量差值使用@{}表示
1选择器变量差值,选择器为变量
@mySelector:banner;
.@{mySelector}{样式
}
2，路径变量差值，图片路径等为变量
@images:"./images/person";
.选择器{background:url("@{images}/ch.jpg");
}
3,属性变量差值，css属性文本为变量
@property:color;
.选择器{@{property}:#0ee;background-@{property}:#999;
}

ajax封装promis请求，原生相关推荐

原声ajax发送post请求,原生JS实现ajax 发送post请求
1. [代码]原生JS实现ajax 发送post请求 var oStr = ''; var postData = {}; var oAjax = null; //post提交的数据 postData ...
java原生封装_[Java教程]原生AJAX封装
[Java教程]原生AJAX封装 0 2016-07-12 13:00:08 回归下原生js,网上看到的AJAX封装,遂拿来改改,不知还有何弊端,望指出!1 var ajaxHelper = { 2 ...
Ajax工作原理和原生JS的ajax封装
前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...
封装原声ajax,原生AJAX封装的简单实现
回归下原生js,网上看到的AJAX封装,遂拿来改改,不知还有何弊端,望指出! var ajaxHelper = { /*1.0 浏览器兼容的方式创建异步对象*/ makeXHR: function ( ...
原生php ajax post_使用原生ajax发送post请求完整案例
搜索热词使用ajax发送数据实现前后台的交互,我想是web开发最基础的技能了.近来dz开发因为不兼容jquery,所以只能使用原生js发送数据,不想还遇到很多问题.在这里分析总结一下.先来一个使用a ...
小程序中封装ajax请求,如何在微信小程序中封装网络请求
如何在微信小程序中封装网络请求发布时间:2021-05-11 16:59:36 来源:亿速云阅读:95 作者:Leah 这期内容当中小编将会给大家带来有关如何在微信小程序中封装网络请求,文章内容丰 ...
ajax 跨域请求数据,JQuery Ajax执行跨域请求数据的解决方案
JQuery Ajax执行跨域请求数据的解决方案今天前端因为需要ajax调用两个不同的项目,请求域不一样,所以涉及ajax跨域的问题 ,其实很简单,具体如下原来的ajax请求如下: $.ajax( ...
JavaScript-初识ajax、ajax封装、及json对象使用(上)
JavaScript-初识ajax.ajax封装.及json对象使用(上!) 一.初识ajax 1.什么是ajax呢 ajax 的全称是Asynchronous JavaScript and XML, ...
js请求结果拦截机器_js利用jquery的jsonp来解决ajax跨域请求被浏览器拦截结果的问题...
先来个表.页面太多对不起我也不知道这张表是从哪个博客保存过来的,所以无法注明博客地址.非常抱歉.URL说明是否允许通信 http://www.a.com/a.jshttp://www.a.com/b. ...

ajax封装promis请求，原生

ajax封装promis请求，原生相关推荐

最新文章

热门文章