webx学习笔记25-svg、promise

svg、promise

svg

svg: 利用DOM元素, 与JS无关 来制作图片

• 优点1: 矢量图形 - 放大缩小后不会失真

• 缺点: 不精致

• 优点2: 图形中的每个部分都可以交互

地图是一种把canvas与svg技术结合的产物，canvas负责背景图的制作，svg负责可交互的各种图标。如果需要在自己的项目中引入地图，可以直接采用第三方，国内如高德和百度两家的地图平台，通过其提供的使用文档，可以快速在我们的项目中引入精美的地图，但都需要注册成为平台的开发者，获取到相应的key和安全密钥才能使用。

promise

回调地狱

在JS中存在异步操作, 例如典型的场景: 网络请求 利用回调函数 在请求完毕时触发

如果多个网络请求之间要等待完成，则根据回调函数的写法，则需要一层层的通过嵌套完成。这就是回调地狱。

回调地狱有两个缺点：

• 难以书写

• 难以阅读，维护

因此es6推出promise解决了回调地狱的问题

promise

Promise是ES6推出的新特性, 是一个构造函数. 利用独特的代码设计, 采用链式写法 从语法角度上解决了回调地狱问题

Promise有三种状态

• pending: 准备就绪. new Promise()后

• fulfilled: 满足,成功. 触发 resolve 函数后

• rejected: 被拒绝. 触发 reject 函数后

设定: 只能从 pending状态 转为其他两种

demo

// 使用时具有固定的格式: 需要背
new Promise((resolve, reject) => {
// resolve的实参会传递给 then中的函数
resolve({ name: 'resolve' })
// reject({ name: "reject" })
// resolve 和 reject 只能 2选1
// 先触发的生效, 后触发的无效
})
.then(
res => { console.log({ res }) }
)
.catch(
err => { console.log({ err }) }
)

实际应用

function get(url) {
// prom : 由 ES6 code snippets 提供的提示
return new Promise((resolve, reject) => {
var xhr = new XMLHttpRequest()
xhr.open('get', url)
xhr.onload = function () {
// 加载完毕 相当于成功, 触发 resolve
resolve(JSON.parse(this.response))
}
xhr.onerror = function () {
// 错误
reject(JSON.parse(this.response))
}
xhr.send()
});
}
var url1 = 'testurl'
var url2 = 'testurl'
var url3 = 'testurl'
var url4 = 'testurl'
var url5 = 'testurl'
// get() : 返回值是 new Promise()
// 相当于是: new Promise().then().catch()
// 链式写法: 多个代码 像链条一样 依次连接在一起. 从代码的格式上消灭了嵌套
get(url1)
.then(res => {
console.log('then:', res)
// then中 返回下一次要触发的promise, 这个Promise会接续下一个then
return get(url2)
}).then(res => {
console.log(res)
return get(url3)
}).then(res => {
console.log(res)
return get(url4)
}).then(res => {
console.log(res)
return get(url5)
}).then(res => {
console.log(res)
})
.catch(err => {
console.log(err)
})
//

fetch

JS自带一个 fetch 方法, 就是用 Promise 封装而来的 做网络请求的

fetch(url).then(res => res.json()).then(res => {
console.log(res);
})

静态方法-all

// all(数组): 数组中存储多个promise, 当这些promise都成功时, 才会触发后续的then方法
Promise.all([
fetch(url1).then(res => res.json()),
fetch(url2).then(res => res.json()),
fetch(url3).then(res => res.json()),
]).then(res => {
console.log(res)
})
// allSettled: 所有的promise状态均敲定后, 触发后续的then
// 敲定: 不管是fulfilled 还是 rejected ,只要都结束了, 就触发then
Promise.allSettled([
fetch(url1).then(res => res.json()),
fetch(url2).then(res => res.json()),
fetch(url3).then(res => res.json()),
]).then(res => {
console.log('allSettled:', res);
})
// 总结:
// all: 都要成功
// allSettled: 只要都执行完即可, 不管成功与否

静态方法-race

// race: 竞争, 竞赛
Promise.race([
fetch(url1).then(res => res.json()),
fetch(url2).then(res => res.json()),
fetch(url3).then(res => res.json()),
]).then(res => {
console.log(res)
})
// any: 多个promsie 谁的状态先敲定, 就用哪个
// 敲定: 完事就可以, 不论成功与否
Promise.any([
fetch(url1).then(res => res.json()),
fetch(url2).then(res => res.json()),
fetch(url3).then(res => res.json()),
]).then(res => {
console.log(res)
})

race方法可以用在灾备安全上，url选择正式服务器地址，灾备服务器地址，在发生服务器宕机的情况下，可以无缝切换到可以正常使用的地址，保证web平稳运行（此方法要求灾备服务器与正式服务器之间要随时保持数据同步）