promise作用:可以用来处理异步回调问题,分离原来的回调写法。在我们需要的时候再去拿数据,不用全部写在回调函数里。
用法: 1.return new Promise(function(resolve, reject) {
resolve: 异步操作执行“成功”后的回调函数
reject: 异步操作执行“失败”后的回调函数
})
2.promise的then方法,可以拿到resolve时传的的参数
catch方法,可以拿到reject时传的参数
// ajax通用函数(promise升级版)
// request有3个参数 => 1.method:请求的方法 2.path:请求的地址 3.data:发送的数据
var ajax = function(request) {
var r = new XMLHttpRequest()
// 设置发送的数据的格式(跨域的时候注释掉这行)
// r.setRequestHeader('Content-Type', 'application/json')
// **返回Promise实例对象
return new Promise(function(resolve, reject) {
// 注册响应函数
r.onreadystatechange = function() {
if (r.readyState === 4) {
if (r.status === 200) {
var response = JSON.parse(r.response)
resolve(response)
} else {
reject(r.status)
}
}
}
// 设置请求方法和请求地址
r.open(request.method, request.path, true)
// 判断是什么类型的请求
var data = JSON.stringify(request.data)
if (request.method == 'GET') {
r.send()
} else {
r.send(data)
}
})
}
// api-ajax请求
var apiAll = {
getDetails: function() {
var url = 'http://192.168.2.104:8090/api/newsList'
var request = {
method: 'GET',
path: url,
data: {},
}
var getDetails = ajax(request)
return getDetails
}
}
// 拿到数据,做点什么
var doSomething = function() {
// 得到promise
var details = apiAll.getDetails()
details.then(function(data) {
// 拿到数据想做什么
log(JSON.stringify(data))
}).catch(function(status) {
// 如果AJAX失败,获得响应代码
log('ERROR: ' + status)
})
}
var __main = function() {
doSomething()
}
__main()
3.并行执行异步任务:
情景1:例如,首页会请求多个接口去拿数据,需要等所有的接口都拿到数据,再去渲染数据。就需要用Promise.all()实现。【同时开跑,都跑到终点结束--“友谊第一”】
情景2:例如同时向两个URL更新用户的用户信息,只需要获得先返回的结果即可。就需要用Promise.race()实现。【同时开跑,第一名产生结束--“比赛第一”】
参考:1.大白话讲解Promise
2.廖雪峰-promise