AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新。
ps: 需要引入jQuery库
1. ajax 写法:
$.ajax({
url: 'http://192.168.XX.XXX:9999/path1', //接口地址
method: 'get', //请求方式
data:{
username: 'wang',
password: 'abcd'
},
dataType: 'json',
timeout: 5000, //超时事件
success: function(res){
console.log('请求成功',res)
$("#box").html(res.title)
$("#box2").html(res.code)
},
error: function(err){
console.log('请求出错',err)
}
})
2. 回调函数:
function fun1(x,callback){
var res = x
var num = x*x
var apple = 5-x
callback(res)
callback(num)
callback(apple)
}
fun1(3,function(res){
console.log('res',res+res)
})
3. 回调地狱:
函数作为参数,进行层层的嵌套,被称之为回调地狱。因为层层的回调,所以很难直接的观察到正确的执行结果。
function fetch(fetchUrl,callback){
$.ajax({
url: fetchUrl,
method: 'get',
timeout: 2000,
success: function(res){
callback(res)
},
error: function(err){
}
})
}
fetch('http://192.168.XX.XX:9999/path1',function(data){
console.log('1111',data);
fetch('http://192.168.XX.XX:9999/path2',function(data){
console.log('222',data)
fetch('http://192.168.XX.XX:9999/path3',function(data){
console.log('333',data)
fetch('http://192.168.XX.XX:9999/path4',function(data){
console.log('444',data)
fetch('http://192.168.XX.XX:9999/path5',function(data){
console.log('555',data)
fetch('http://192.168.XX.XX:9999/path6',function(data){
console.log('666',data)
})
})
})
})
})
})
-
解决方法:
promise
await/async (语法糖)
-
promise的三个状态:
function getPromise(){
return new Promise((resolve, reject) => {
if( //成功 ) {
resolve(// 原本成功的回调)
} else {
reject(// 原本失败的回调)
}
})
}
-
promise 的两个方法 then、catch:
getPromise().then(function (res) {
console.log('res', res);
}, function err () {
console.log('err', err)
}).catch( error => {
console.log('error', error)
})
-
Async/await:
async function fun () {
await /** 异步操作 */
}
异步操作的结果是其本身,直接赋值即可
const result = await /** 异步操作 */
Async/await 其实是 Generator 的语法糖
更多推荐
ajax/ 回调函数(回调地狱)
发布评论