写文章

react+flexible适配移动端项目的配置

吐槽君 分类：javascript

1.安装flexible

npm i lib-flexible --save

2.安装 sass-loader node-sass

npm i sass-loader node-sass --save-dev

3.安装 postcss-px2rem

 npm i postcss-px2rem --save

4.在 node_modules/config/webpack.config.js 下做如下配置：

引入
	再次之前要执行 npm run eject

 const px2rem = require('postcss-px2rem');
 px2rem({ remUnit: 75 })

react+flexible适配移动端项目的配置

react+flexible适配移动端项目的配置

react+flexible适配移动端项目的配置

5. 引入 lib-flexible，在项目入口文件 index.js 里 引入 lib-flexible

import 'lib-flexible'

react+flexible适配移动端项目的配置

6.重新启动下项目完成配置

Promise实现原理（附源码）

1. Promise 基本结构

new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('FULFILLED')
  }, 1000)
})

 
构造函数Promise必须接受一个函数作为参数，我们称该函数为handle，handle又包含resolve和reject两个参数，它们是两个函数。

2.什么是Promise？我们用Promise来解决什么问题？

Promise 是异步编程的一种解决方案：
从语法上讲，promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。
promise有三种状态：pending(等待态)，fulfiled(成功态)，rejected(失败态)；状态一旦改变，就不会再变。创造promise实例后，它会立即执行。

3. Promise 的 then 方法

promise.then(onFulfilled, onRejected)

参数可选
onFulfilled 和 onRejected 都是可选参数。

如果 onFulfilled 或 onRejected 不是函数，其必须被忽略

onFulfilled 特性
    如果 onFulfilled 是函数：

当 promise 状态变为成功时必须被调用，其第一个参数为 promise 成功状态传入的值（ resolve 执行时传入的值）
在 promise 状态改变前其不可被调用
其调用次数不可超过一次

onRejected 特性
    如果 onRejected 是函数：

当 promise 状态变为失败时必须被调用，其第一个参数为 promise 失败状态传入的值（ reject 执行时传入的值）
在 promise 状态改变前其不可被调用
其调用次数不可超过一次

多次调用
    then 方法可以被同一个 promise 对象调用多次

当 promise 成功状态时，所有 onFulfilled 需按照其注册顺序依次回调
当 promise 失败状态时，所有 onRejected 需按照其注册顺序依次回调

返回
then 方法必须返回一个新的 promise 对象

promise2 = promise1.then(onFulfilled, onRejected);

因此 promise 支持链式调用

4.all的用法：谁跑的慢，以谁为准执行回调。all接收一个数组参数，里面的值最终都算返回Promise对象

let Promise1 = new Promise(function(resolve, reject){})
let Promise2 = new Promise(function(resolve, reject){})
let Promise3 = new Promise(function(resolve, reject){})

let p = Promise.all([Promise1, Promise2, Promise3])

p.then(funciton(){
  // 三个都成功则成功  
}, function(){
  // 只要有失败，则失败 
})

有了all，你就可以并行执行多个异步操作，并且在一个回调中处理所有的返回数据，是不是很酷？有一个场景是很适合用这个的，一些游戏类的素材比较多的应用，打开网页时，预先加载需要用到的各种资源如图片、flash以及各种静态文件。所有的都加载完后，我们再进行页面的初始化。

5.race的用法：谁跑的快，以谁为准执行回调

race的使用场景：比如我们可以用race给某个异步请求设置超时时间，并且在超时后执行相应的操作，代码如下：

 //请求某个图片资源
    function requestImg(){
        var p = new Promise((resolve, reject) => {
            var img = new Image();
            img.onload = function(){
                resolve(img);
            }
            img.src = '图片的路径';
        });
        return p;
    }
    //延时函数，用于给请求计时
    function timeout(){
        var p = new Promise((resolve, reject) => {
            setTimeout(() => {
                reject('图片请求超时');
            }, 5000);
        });
        return p;
    }
    Promise.race([requestImg(), timeout()]).then((data) =>{
        console.log(data);
    }).catch((err) => {
        console.log(err);
    });

requestImg函数会异步请求一张图片，我把地址写为"图片的路径"，所以肯定是无法成功请求到的。timeout函数是一个延时5秒的异步操作。我们把这两个返回Promise对象的函数放进race，于是他俩就会赛跑，如果5秒之内图片请求成功了，那么遍进入then方法，执行正常的流程。如果5秒钟图片还未成功返回，那么timeout就跑赢了，则进入catch，报出“图片请求超时”的信息。运行结果如下：

react+flexible适配移动端项目的配置

小结HTTP状态码

react+flexible适配移动端项目的配置

什么是HTTP状态码

HTTP状态码是服务端返回给客户端（因为这里是web开发，这里的客户端指浏览器客户端）的3位数字代码。

这些状态码相当于浏览器和服务器之间的对话信息。它们相互沟通两者之间的事情是正常运行了还是运行失败了或者发生了一些其他的事情（如Continue）。了解状态码有助于你快速的诊断错误，减少网站的停机时间等等。

状态码分类

状态码共分为五类，以1-5数字开头进行标识，如下：

  • 1xxs - 信息性：服务器正在处理请求。

  • 2xxs - 成功信息：请求已经完成，服务器向浏览器提供了预期的响应。

  • 3xxs –重定向：你的请求被重定向到了其他地方。服务器收到了请求，但是有某种重定向。

  • 4xxs – 客户端错误：客户端发生错误，导致服务器无法处理请求。

  • 5xxs – 服务端错误：客户端发出了有效的请求，但是服务器未能正确处理请求。

    1xxs状态码

    100 Continue：表明目前为止，所有的请求内容都是可行的，客户端应该继续请求，如果完成，则忽略它。

    101 Switching Protocol：该状态码是响应客户端Upgrade标头发送的，并且指示服务器也正在切换协议。

    103 Early Hints：主要用于与Link链接头一起使用，以允许用户代理在服务器仍在准备响应时开始预加载资源。

    2xxs状态码

    • 200 OK

      ：请求成功。成功的含义取决于HTTP方法：

      • GET：资源已被提取并在消息正文中传输。
      • HEAD：实体标头位于消息正文中。
      • POST：描述动作结果的资源在消息体中传输。
      • TRACE：消息正文包含服务器收到的请求信息。（方法不安全，一般不用）

    说到了HTTP的方法，可以戳HTTP请求方法这个解析教程来了解一下。

    • 201 Created：请求已经成功，并因此创建了一个新的资源。这通常是在PUT或POST请求之后发送的响应。
    • 202 Accepted：请求已经接收到，但是没有响应，没有结果。意味着不会有一个异步的响应去表明当前请求的结果，预期另外的进程和服务去处理请求，或者批处理。
    • 204 No Content：服务器成功处理了请求，但不需要返回任何实体内容，并且希望返回更新了的元信息。遇到复杂请求时候，浏览器会发送一个OPTION方法进行预处理返回响应。

    关于复杂请求和简单请求，可以参考这篇文章CORS非简单请求。

    • 205 Reset Content：服务器已经成功处理了请求，但是没有返回任何内容。与204响应不同，返回此状态码的响应要求请求者重置文档视图

    3xxs状态码

    上文已经提到过，这一大类是提示重定向，可是有一个奇葩--304，它并不是表示重定向的信息提示，而是表示资源未被更改。至于为什么会被放在这个分类里面，真不知道～（看官知道的话补充下啦）?

    • 301 Moved Permanently：被请求的资源已永久移动到新位置，并且将来任何对此资源的引用都应该使用响应返回的若干个URI之一。
    • 302 Found(Previously "Moved temporarily")：请求的资源现在临时从不同的URI响应请求。由于这样的重定向是临时的，客户端应当继续向原有地址发送以后的请求。只有在Cache-Control或Expires中进行了指定的情况下，这个响应才是可缓存的。
    • 303 See Other：对当前的请求的响应可以在另一个URI上被找到，而且客户端应该采用GET的方式访问那个链接。这个方法的存在主要是为了允许由脚本激活的POST请求输出重定向到一个新的资源。
    • 304 Not Modified：如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。304 响应禁止包含消息体，因此始终以消息头后的第一个空行结尾。请求的时候一般结合If-Modified-Since头部使用。
    • 307 Temporary Redirect：307的意义如上302。与历史上302不同的是在重新发出原始请求时不允许更改请求方法。比如，使用POST请求始终就该用POST请求

    4xxs状态码

    • 401 Unauthorized：这意味着你的登录凭证无效。服务器不知道你是谁，这时，你需要尝试重新登录。
    • 403 Forbidden：服务器已经理解请求，但是拒绝执行它。与401不同，403知道是你登录了，但是还是拒绝了你。
    • 404 Not Found：请求失败，你请求所希望得到的资源未在服务器上发现。
    • 410 Gone：被请求的资源在服务器上已经不再可用，而且没有任何已知的转发地址。
    • 422 Unprocessable Entity：请求格式良好，但是由于语义错误而无妨遵循。这时候要检查下自己的传参格式语义有没有正确了。
    • 429 Too Many Requests：用户在给定的时间内发送了太多请求（“限制请求速率”）。在DDOS攻击中就可以使用到了。

    5xxs状态码

    • 500 Internal Server Error：服务器内部错误，服务器遇到了不知道如何处理的情况。比如后端同学写错了model啥的～

    • 503 Service Unavailable：服务器没有准备好处理请求。常见的原因是服务器因维护或重载而停机。

    • 504 Gateway Timeout：网关超时，服务器未能快速的做出反应。请求接口返回pedding时间过长基本就是这个问题了，囧。

回复

我来回复

  • 暂无回复内容