how to encapsulate an ajax, callback with Es6 syntax, use promise callback
how to encapsulate an ajax, callback with Es6 syntax, use promise callback
mean the original XmlHttpRequest?
function ajax(url,success,failure){
let xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState===4){
switch(xmlhttp.status){
case 200:{
success(xmlhttp.responseText)
break
}
default:{
failure(xmlhttp.status)
break
}
}
}
};
xmlhttp.open("GET","url",true);
xmlhttp.send(null);
}
function ajaxPromise(url){
return new Promise(function(resolve,reject){
ajax(url,resolve,reject)
})
}
ajaxPromise("https://www.baidu.com")
.then(function(data){
console.log(data)
})
Note: it is best to understand the idea of Promise . Promise is not a new ajax , but an idea of dealing with asynchronous transaction flow. See demo below, online source code: http://live.datatables.net/ra.
new Promise(function(resolve, reject){
setTimeout(function(){
resolve("timeout")
},3000)
}).then(function(data){
console.log(data)
})
console.log("here")just use axios or fetch directly
Previous: Doubts about react inheritance
Next: What's wrong with the invalidity of the python virtual environment?
I need to implement in a chained promise function, any function error in the middle terminates the program, and can catch the error function, and then perform different operations according to different error functions. How can the following code be imp...
import React from react ; class PublicScreen extends React.Component { constructor(props) { super(props); this.getStyle = this.getStyle.bind(this); } getStyle() { const { width = 1920, height = 1080 } = this.pr...
read a number, such as 521 change this number to 0521 but put it into four div separately, how to realize it? 0 < div > 5 < div > 2 < div > 1 < div > ...
originally run directly in the browser (Chrome 65) will report ReferenceError errors, but after babel conversion, and then run, it will be undefined, these two errors are completely different, does it mean that the conversion of babel is not complete? ...
import React from react ; import ReactDOM from react-dom ; import . assets styles index.less ; import Green from . assets images green.png ; import Red from . assets images red.png ; class Circle extends React.Component { constructor...
function foo(){ setTimeout(()=>{ console.log("is:",this.id); 42 },100) } var id = 21; foo.call({id:42}) The this of the function in js is dynamic, depending on who calls it at run time, in which the this inside foo points to an a...
how do I use generator to achieve the following functions? function f1(){ return new Promise((resolve,reject) =>{ setTimeout(() =>{ resolve(1); },1000) }) } function f2(valu...
test(...arg) { console.log("",arg); } render(){ return <View style={{flex:1,backgroundColor:"blue"}}> <TouchableOpacity activeOpacity={1} onPress={this. test("")}&...
insert a large number of pictures into the project, how to simplify import React from react ; import ReactDOM from react-dom ; import . assets styles index.less ; import A0 from . assets images A0.png ; import A1 from . assets images A1.p...
under normal circumstances, variables declared by let or const cannot be declared repeatedly, and an error will be reported even when using var. eg: let a = 123; var a = 456; error prompt: Uncaught SyntaxError: Identifier a has already been declar...
I don t understand why this is window in this broken code. Thank you for your understanding. Thank you. var o = { fn:() => { console.log(this) } } o.fn() ...
I want to return a data corresponding to id based on the data.id passed in ...
< H1 > Ruan Yifeng: the extension operator (spread) is three dots (.). It is like the inverse operation of rest parameters, converting an array into a sequence of parameters separated by commas. < H1 > what does the inverse operation of rest parameter...
in es6. The extension operator expands the array [1Magol 2pr 3] unfolds as 1Magol 2Jol 3, so what is this 1Magol 2Jol 3? An array is not an array, a string is not a string later, there was also the operation of the object. The operator is called de...
<div className={ break_down_div }> {this.state.breakDown && this.state.breakDown.length != 0? <canvas className={ blueCircle } >< canvas> <div re...
1. How to implement a general regular validation form with the least amount of code = project, 1. Login has two input (verify mailbox, password 10 digits + letters) 2. input () both forms are displayed after input loses focus (correct or w...
first of all, there is such a piece of data list[ zhangsan , lisi , wangmazi ] people[ { name: zhangsan , username: },{ name: lisi , username: },{ name: wangmazi , username: } ] then the qu...
looking at the Vue official website tutorial, there are the following suggestions for adding multiple attributes: = split line = if you want to add new responsive attributes, don t be like this: Object.assign ( vm.userProfile , { age: 27, favorit...
I have a vue project where ajax requests are sent using axios. one of the list pages, clicking on the list will send the details of the corresponding list of the request query. now in order to prevent frequent requests from being sent due to multiple ...
< H2 > original question: < H2 > A module that uses ES6 in a smart editor (such as WebStorm) introduces a module, first import {} from fs ; and then jump the cursor back to curly braces {} to write the desired module, because there is a smart ...