promesa
1. promesa es lo que debe hacer?
- Se utiliza principalmente para el cálculo asíncrono
- Puede ser en cola operación asincrónica, realizado en un orden deseado, devolver un resultado en línea con las expectativas
- Se puede pasar entre los objetos y las operaciones promesa de ayudar a procesar la cola
2. ¿Por qué deberían prometer
El procesamiento de operación asíncrona
Asíncrono: Trabajo aspirado tarda mucho tiempo después de la entrega de la A a la del sistema, vaya a seguir haciendo el trabajo B entregado. Esperar hasta que el sistema complete la parte delantera de la obra, y luego a través de la devolución de llamada o un evento, de A a continuar para hacer el resto. Para completar el trabajo de AB, y entregar su nada que ver cronológico, por lo que llamó "asíncrono".
3. La operación asincrónica sintaxis común
- Los detectores de eventos
document.getElementById('#start').addEventListener('click', start, false);
function start() {
// 响应事件，进行相应的操作
}
// jquery on 监听
$('#start').on('click', start)
- función de devolución
// 比较常见的有ajax
$.ajax('http://www.wyunfei.com/', {
success (res) {
// 这里可以监听res返回的数据做回调逻辑的处理
}
})
// 或者在页面加载完毕后回调
$(function() {
// 页面结构加载完成，做回调逻辑处理
})
- problema de devolución de llamada asincrónica
- Antes del procesamiento asíncrono es manejado por la forma de llamada de retorno pura
- Es fácil entrar en el infierno de devolución de llamada, privados de la capacidad de retorno de la función
- El problema puede ser resuelto, pero es difícil de leer y difícil de mantener
- El más mínimo error se suba al de devolución de llamada Hell - niveles anidados de profundidad, mal mantenimiento
4. promesa de apariencia
- promesa es un objeto, la diferencia entre el objeto y funciones que puede salvar el estado del objeto, la función no puede (a excepción de cierre)
- Privados de la capacidad de la función no devuelve, por lo que no hay capas de transferencia de devolución de llamada, llamada de vuelta para obtener los datos
- Codificación de estilo, fácil de entender, fácil de mantener
- A la espera de una pluralidad de asíncrona combinado facilitar la solución
5. promesa detallada
new Promise(
function (resolve, reject) {
// 一段耗时的异步操作
resolve('成功') // 数据处理完成
// reject('失败') // 数据处理出错
}
).then(
(res) => {console.log(res)}, // 成功
(err) => {console.log(err)} // 失败
)
- papel es el de resolver el estado del objeto de la promesa "sin terminar" a "éxito" (es decir, cambiado de En espera de resolver), mediante convocatoria exitosa operación asincrónica, y el resultado de la operación asincrónica, para pasar a cabo como un parámetro
- papel es el de expulsar el objeto desde el estado Promise "sin terminar" a "con error" (es decir, cambiado de En espera de Rechazado), se invoca cuando una operación asincrónica falla, y los errores de operación asíncronos pueden ser, como un parámetro para pasar hacia fuera
- Hay tres estados prometen
- estado pendiente original [Pendiente]
- cumplido [darse cuenta] operación exitosa
- Rechazado [rechazada] Error en la operación
- Cuando cambia el estado de la promesa, se activará la función de entonces () en respuesta a los pasos subsiguientes de
- un estado alterado promesa, no va a cambiar
- promesa objeto cambia de estado, sólo dos posibilidades:
- De pendiente se convierte cumplido
- A partir de los cambios pendientes a rechazados
Ejemplo:
new Promise(resolve => {
setTimeout(() => {
resolve('hello')
}, 2000)
}).then(res => {
console.log(res)
})
Realizar dos veces:
new Promise(resolve => {
setTimeout(() => {
resolve('hello')
}, 2000)
}).then(val => {
console.log(val) // 参数val = 'hello'
return new Promise(resolve => {
setTimeout(() => {
resolve('world')
}, 2000)
})
}).then(val => {
console.log(val) // 参数val = 'world'
})
Después de la promesa a continuación:
let pro = new Promise(resolve => {
setTimeout(() => {
resolve('hello world')
}, 2000)
})
setTimeout(() => {
pro.then(value => {
console.log(value) // hello world
})
}, 2000)
Después de la promesa como la característica más importante de la cola, se generó una cola promesa en cualquier lugar que uno, nosotros podemos ponerlo como una variable pasada a otros lugares.
6. entonces ()
- Recibir como una función de dos parámetros que representan gastados (éxito) y rechazado (insuficiencia)
- entonces () devuelve una nueva instancia de la promesa, por lo que se pueden encadenar llamadas
- El estado actual de la alteración superficial cuando Promise, .then () de acuerdo con su estado final, seleccionar una respuesta de estado de ejecución de funciones específicas
- función de respuesta de estado puede devolver una nueva promesa, u otro valor, el valor de retorno no se puede considerar que devuelve un valor nulo;
- Si se ejecuta el regreso de una nueva promesa, entonces el .then siguiente nivel () después de una nueva promesa de cambio de estado
- Si devuelve cualquier otro valor, entonces un .then (ejecución inmediata)
7. .then () dentro .then () en el caso de
- Debido .then () devuelve una promesa o ejemplos
- Dentro esperará entonces () se ejecuta, y luego la ejecución fuera
new Promise(resolve=>{
console.log('step 1')
setTimeout(()=>{
resolve(100)
},1000)
}).then((value)=>{
return new Promise(resolve => {
console.log('step 2')
setTimeout(()=>{
resolve(200)
},1000)
})
}).then((value) => {
console.log('step 3')
return value
}).then((value) => {
console.log('step 4')
return value
}).then((value) => {
console.log('step 5')
console.log(value)
})
8. Control de errores
Promise captura automáticamente anormalidades internas, y función de respuesta rechazado para procesar
la primera:
new Promise(resolve=>{
setTimeout(()=>{
throw new Error('bye')
},1000)
}).then(val=>{
console.log(val)
}).catch(err => {
console.log('error',error)
})
//Uncaught Error: bye at 01.html:36
//第二种
new Promise(function(resolve, reject) {
setTimeout(() => {
reject('bye')
}, 1000)
}).then(()=>{
console.log(val)
},(err)=>{
console.log('error:'+err)
})
//error:bye
- manejar dos enfoques de error
- El primero: rechazar ( 'error') .then (() => {}, () => {} error de lógica de manipulación)
- La segunda: throw new error ( 'error') .catch (() => {} error lógico de tramitación)
- Recomienda el uso del segundo método, más clara y fácil de leer, y puede capturar todo el error anterior (puede coger la N, entonces la corrección de errores)
9. Promise.all () ejecución por lotes
- Promise.all ([p1, p2, p3]) para una pluralidad de instancias de promesa, Promise empaqueta en una nueva instancia, la instancia se devuelve promesa ordinaria
- Se recibe una matriz como un parámetro
- Promise Array puede ser un objeto, puede ser otra que, esperar a que el cambio de estado sólo se Promise
- Cuando todos los sub-Promise se han completado, la promesa se ha completado, el valor de retorno es la pena todo el arsenal
- Cualquiera de una falla, la promesa falla, el valor de retorno es un fracaso de la primera sub prometen resultados
//切菜
function cutUp() {
console.log('开始切菜')
var p=new Promise(function(resolve, reject) {
setTimeout(() => {
console.log('切菜完毕')
resolve('切好的菜')
}, 1000);
})
return p
}
//烧水
function boil(params) {
console.log('开始烧水')
var p=new Promise(function(resolve, reject) {
setTimeout(() => {
console.log('烧水完毕')
resolve('烧好的水')
}, 1000);
})
return p
}
//汇总，切好菜 烧好水才做下一步
Promise.all([cutUp(),boil()])
.then(results => {
console.log('准备工作完毕')
console.log(results)
})
//开始切菜
//开始烧水
//切菜完毕
//烧水完毕
//准备工作完毕
// ["切好的菜", "烧好的水"]
10. Promise.race ()
Promise.all similar (), excepto que tiene un arbitraria completa, incluso completado
let p1=new Promise(resolve=>{
setTimeout(()=>{
resolve('p1')
},1000)
})
let p2=new Promise(resolve=>{
setTimeout(()=>{
resolve('p2')
},500)
})
Promise.race([p1,p2]).then(value=>{
console.log(value);//p2
})
combate:
/***
第一步：找到北京的id
第二步：根据北京的id -> 找到北京公司的id
第三步：根据北京公司的id -> 找到北京公司的详情
目的：模拟链式调用、回调地狱
***/
//请求第一个API: 地址在北京的公司的id
$.ajax({
url: 'https://www.easy-mock.com/mock/5a52256ad408383e0e3868d7/lagou/city',
success(resCity) {
let findCityId = resCity.filter(item => {
if (item.id = 'c1') {
return item
}
})[0].id
// 请求第二个API: 根据上一个返回的在北京公司的id “findCityId”，找到北京公司的第一家公司的id
$.ajax({
url: 'https://www.easy-mock.com/mock/5a52256ad408383e0e3868d7/lagou/position-list',
success(resPosition) {
let findPostionId = resPosition.filter(item => {
if (findPostionId == item.id) {
return item
}
})[0].id
// 请求第三个API: 根据上一个API的id(findPostionId)找到具体公司，然后返回公司详情
$.ajax({
url: 'https://www.easy-mock.com/mock/5a52256ad408383e0e3868d7/lagou/company',
success(resCom) {
let comInfo = resCom.filter(item => {
if (findPostionId == item.id) {
return item
}
})[0]
console.log(comInfo)
}
})
}
})
}
})
//promise写法
//第一步获取城市列表
const cityList = new Promise((reslove, reject) => {
$.ajax({
url: 'https://www.easy-mock.com/mock/5a52256ad408383e0e3868d7/lagou/city',
success(res) {
reslove(res)
}
})
})
//第二步 找到城市是北京的id
cityList.then(res => {
let findCityId = res.filter(item => {
if (item.id == 'c1') {
return item
}
})[0].id
})
// 第四步（2）：传入公司的id
companyInfo(findPostionId)
// 第三步（1）：根据北京的id -> 找到北京公司的id
function findCompanyId() {
let aaa = new Promise((resolve, reject) => {
$.ajax({
url: 'https://www.easy-mock.com/mock/5a52256ad408383e0e3868d7/lagou/position-list',
success(res) {
resolve(res)
}
})
})
return aaa
}
findCompanyId().then(res => {
// 第三步（2）：根据北京的id -> 找到北京公司的id
let findPostionId = res.filter(item => {
if (item.cityId == findCityId) {
return item
}
})[0].id
// 第四步：根据上一个API的id(findPostionId)找到具体公司，然后返回公司详情
function companyInfo(id) {
let companyList = new Promise((resolve, reject) => {
$.ajax({
url: 'https://www.easy-mock.com/mock/5a52256ad408383e0e3868d7/lagou/company',
success(res) {
let comInfo = res.filter(item => {
if (id == item.id) {
return item
}
})[0]
console.log(comInfo)
}
})
})
}
