update

Author: happylindz

markdown/best-exploration-for-redux-async-action.md

@@ -18,15 +18,15 @@ yarn start
 
 > view -> actionCreator -> action -> reducer -> newState ->(map) container component
 
-但是真是业务开发我们需要处理异步请求，比如：请求后台数据，延迟执行某个效果，setTimout, setInterval 等等，所以当 Redux 遇到异步操作的时候，又该如何处理呢？
+但是真实业务开发我们需要处理异步请求，比如：请求后台数据，延迟执行某个效果，setTimout, setInterval 等等，所以当 Redux 遇到异步操作的时候，又该如何处理呢？
 
 首先我们围绕一个简单的例子展开，然后通过各种方式将它实现出来，基本效果如下：
 
-![](../images/asynchronousAction/1.gif)
+![](https://raw.githubusercontent.com/happylindz/blog/master/images/asynchronousAction/1.gif)
 
 ## 不使用中间件处理异步
 
-这里我使用的是 CNode 官网的 API，用来获取首页的文章标题，并将他们全部展示出来，并且右边有个 X 按钮，点击 X 按钮可以将该标题删除。异步请求我们使用封装好的 axios 库，你可以这样发起异步请求：
+这里我使用的是 CNode 官网的 API，获取首页的文章标题，并将他们全部展示出来，并且右边有个 X 按钮，点击 X 按钮可以将该标题删除。异步请求我们使用封装好的 axios 库，你可以这样发起异步请求：
 
 ```javascript
 const response = await axios.get('/api/v1/topics')
@@ -334,7 +334,7 @@ export default createStore(reducer, initValue, applyMiddleware(reduxPromise))
 
 效果:没有 Loading 这个中间状态
 
-![](../images/asynchronousAction/2.gif)
+![](https://raw.githubusercontent.com/happylindz/blog/master/images/asynchronousAction/2.gif)
 
 但是如果使用 redux-promise 的话相当于是延后执行了 action，等获取到结果之后再重新 dispatch action。这么写其实有个问题，就是无法发起 FETCH_START action，因为actionCreator 中没有 dispatch 这个字段，redux-promise 虽然赋予了 action 延后执行的能力，但是没有能力发起多 action 请求。
 
@@ -509,7 +509,7 @@ sagaMiddleware.run(mySaga)
 
 我们要做的例子效果如下：
 
-![](../images/asynchronousAction/3.gif)
+![](https://raw.githubusercontent.com/happylindz/blog/master/images/asynchronousAction/3.gif)
 
 1. 有两个按钮用来模拟异步请求，分别在 5s 和 1s 内响应数据，我们需要保证按钮点击的顺序性，即当 5s 后数据返回时不会覆盖掉最新数值 1000，保证页面上显示的数据永远是最后一次点击获取到的数据。
 2. 防抖处理，在 1000ms 内再次点击按钮不会进行响应。
@@ -621,7 +621,7 @@ take 监听 INITIAL 类型的 action，首先判断之前有没有任务未执
 
 最后我们再通过一个例子来对比 thunk 和 saga 在书写上的差异，例子效果如下：
 
-![](../images/asynchronousAction/4.gif)
+![](https://raw.githubusercontent.com/happylindz/blog/master/images/asynchronousAction/4.gif)
 
 点击按钮可以每秒增加 1，可以再次点击进行取消增加计数器，也可以通过 5s 后自动取消增加计数器。
 
@@ -750,15 +750,3 @@ export default function* watchIncrementAsync() {
 ```
 
 关于 Redux 异步控制就讲到这里，希望大家有所收获！
-
-
-
-
-
-
-
-
-
-
-
-

markdown/cross-origin-all-you-need-to-know.md

@@ -26,7 +26,7 @@ yarn
 
 简单来说，只有当协议，域名，端口号相同的时候才算是同一个域名，否则，均认为需要做跨域处理。
 
-![](../images/crossOrigin/1.jpg)
+![](https://raw.githubusercontent.com/happylindz/blog/master/images/crossOrigin/1.jpg)
 
 ## 跨域方法
 
@@ -74,9 +74,9 @@ console.log('启动服务，监听 127.0.0.1:3000');
 ```html
 // jsonp/index.html
 <script>
-	function jsonpCallback(data) {
-		alert('获得 X 数据:' + data.x);
-	}
+    function jsonpCallback(data) {
+        alert('获得 X 数据:' + data.x);
+    }
 </script>
 <script src="http://127.0.0.1:3000?callback=jsonpCallback"></script>
 ```
@@ -108,7 +108,7 @@ yarn jsonp
 
 打开浏览器访问 ```localhost:8080``` 即可看到获取到的数据。
 
-![](../images/crossOrigin/2.jpg)
+![](https://raw.githubusercontent.com/happylindz/blog/master/images/crossOrigin/2.jpg)
 
 至此，通过 JSONP 跨域获取数据已经成功了，但是通过这种方式也存在着一定的优缺点：
 
@@ -169,7 +169,7 @@ console.log('启动服务，监听 127.0.0.1:3000');
 
 然后我们执行命令：```yarn cors``` 打开浏览器访问 ```localhost:3000``` 即可看到效果：
 
-![](../images/crossOrigin/3.jpg)
+![](https://raw.githubusercontent.com/happylindz/blog/master/images/crossOrigin/3.jpg)
 
 成功的关键在于 Access-Control-Allow-Origin 是否包含请求页面的域名，如果不包含的话，浏览器将认为这是一次失败的异步请求，将会调用 xhr.onerror 中的函数。
 
@@ -222,7 +222,7 @@ console.log('启动服务，监听 127.0.0.1:3000');
 
 启动服务 ```yarn proxy``` 并访问 ```http://localhost:3000/topics``` 即可看到效果：
 
-![](../images/crossOrigin/4.jpg)
+![](https://raw.githubusercontent.com/happylindz/blog/master/images/crossOrigin/4.jpg)
 
 跨域请求成功。纯粹的获取跨域获取后端数据的请求的方式已经介绍完了，另外介绍四种通过 iframe 跨域与其它页面通信的方式。
 
@@ -291,7 +291,7 @@ data.html 收到消息后通过 parent.location.hash 值来修改 index.html 的
 
 之后启动服务 ```yarn hash```，即可在 ```localhost:8080``` 下观察到：
 
-![](../images/crossOrigin/5.jpg)
+![](https://raw.githubusercontent.com/happylindz/blog/master/images/crossOrigin/5.jpg)
 
 当然这种方法存在着诸多的缺点：
 
@@ -346,11 +346,11 @@ window.location = "http://www.baidu.com"
 
 但是由于 index.html 页面与该页面 iframe 的 src 如果不同源的话，则无法操作 iframe 里的任何东西，所以就取不到 iframe 的 name 值，所以我们需要在 data.html 加载完后重新换个 src 去指向一个同源的 html 文件，或者设置成 'about:blank;' 都行，这时候我只要在 index.html 相同目录下新建一个 proxy.html 的空页面即可。如果不重新指向 src 的话直接获取的 window.name 的话会报错：
 
-![](../images/crossOrigin/6.jpg)
+![](https://raw.githubusercontent.com/happylindz/blog/master/images/crossOrigin/6.jpg)
 
 之后运行 ```yarn name``` 即可看到效果：
 
-![](../images/crossOrigin/7.jpg)
+![](https://raw.githubusercontent.com/happylindz/blog/master/images/crossOrigin/7.jpg)
 
 ## 6.postMessage
 
@@ -392,7 +392,7 @@ postMessage 是 HTML5 新增加的一项功能，跨文档消息传输(Cross Doc
 
 启动服务：```yarn postMessage``` 并打开浏览器访问：
 
-![](../images/crossOrigin/8.jpg)
+![](https://raw.githubusercontent.com/happylindz/blog/master/images/crossOrigin/8.jpg)
 
 对 postMessage 感兴趣的详细内容可以看看教程：
 
@@ -469,11 +469,10 @@ http {
 
 启动服务 ```yarn domain``` 访问浏览器即可看到效果：
 
-![](../images/crossOrigin/9.jpg)
+![](https://raw.githubusercontent.com/happylindz/blog/master/images/crossOrigin/9.jpg)
 
 ## 总结：
 
 前面七种跨域方式我已经全部讲完，其实讲道理，常用的也就是前三种方式，后面四种更多时候是一些小技巧，虽然在工作中不一定会用到，但是如果你在面试过程中能够提到这些跨域的技巧，无疑在面试官的心中是一个加分项。
 
 上面阐述方法的时候可能有些讲的不明白，希望在阅读的过程中建议你跟着我敲代码，当你打开浏览器看到结果的时候，你也就能掌握到这种方法。
-