月度归档： 2018年1月

superagent post数据获取2次请求 & php如何接受AJAX POST跨域的request payload形式的参数

leokim / / PHP, 前端

superagent 使用post的时候会有2次请求

一次请求的类型是OPTIONS

另一种是POST

开始的时候我如何都接受不到post过来的数据

后来仔细核对了浏览器里的信息发现传输数据的方式不是以前的form data而是request payload

然后就上网找如何处理request payload类型的数据

最终像下面这样解决

header('Access-Control-Allow-Origin: *');
        header('Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE');

        if($_SERVER['REQUEST_METHOD'] == 'OPTIONS'){
            header('HTTP/1.1 204 No Content');
            header('Server: Cowboy');
            header('Content-Length: 0');
            header('Connection: keep-alive');
            header('Vary: Access-Control-Request-Headers');
            header('Access-Control-Allow-Headers: content-type');
            header('Date: Fri, 19 Jan 2018 07:57:49 GMT');
            header('Via: 1.1 vegur');
        }else if($_SERVER['REQUEST_METHOD'] == 'POST'){
            $request_body = file_get_contents('php://input');
            $data = json_decode($request_body);

            echo json_encode($result);
        }

Promise 对象

leokim / / 前端

http://wiki.jikexueyuan.com/project/es6/promise.html

基本用法

ES6 原生提供了 Promise 对象。所谓 Promise 对象，就是代表了某个未来才会知道结果的事件（通常是一个异步操作），并且这个事件提供统一的 API，可供进一步处理。

有了 Promise 对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise 对象提供的接口，使得控制异步操作更加容易。Promise 对象的概念的详细解释，请参考<a rel="nofollow" href="http://javascript.ruanyifeng.com/" "="" style="box-sizing: border-box; padding: 0px; margin: 0px; background-color: transparent; color: rgb(45, 133, 202); text-decoration-line: none;">《JavaScript标准参考教程》。

ES6 的 Promise 对象是一个构造函数，用来生成 Promise 实例。

var promise = new Promise(function(resolve, reject) {
  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

promise.then(function(value) {
  // success
}, function(value) {
  // failure
});

上面代码中，Promise 构造函数接受一个函数作为参数，该函数的两个参数分别是 resolve 方法和 reject 方法。如果异步操作成功，则用 resolve 方法将 Promise 对象的状态，从“未完成”变为“成功”（即从 pending 变为 resolved）；如果异步操作失败，则用 reject 方法将 Promise 对象的状态，从“未完成”变为“失败”（即从 pending 变为 rejected）。

Promise 实例生成以后，可以用 then 方法分别指定 resolve 方法和 reject 方法的回调函数。

下面是一个使用 Promise 对象的简单例子。

function timeout(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

timeout(100).then(() => {
  console.log('done');
});

……

vue 登录存localStorage

leokim / / 前端

先补充下localStorage 知识点：

JS对象

读取形式：

localStorage.name

添加/修改

localStorage.name = "xuanyuan"

其中"xuanyuan"只能是字符串形式（目前为止只支持字符串）。所以存储时是JSON对象时需要执行下JSON.stringify，所以获取时需要执行下JSON.parse

删除

detele localStorage.name

API

获取键值对数量

localStorage.length

读取

localStorage.getItem('name'), localStorage.key(i)

添加/修改

localStorage.setItem('name','xuanyuan')

删除对应键值

localStorage.removeItem('name')

删除所有数据

localStorage.clear()

顺便说下，localStorage有效期是永久的。一般的浏览器能存储的是5MB左右。sessionStorage api与localStorage相同。

sessionStorage默认的有效期是浏览器的会话时间（也就是说标签页关闭后就消失了）。

localStorage作用域是协议、主机名、端口。（理论上，不人为的删除，一直存在设备中）

sessionStorage作用域是窗口、协议、主机名、端口。

知道了这些知识点后，你的问题就很好解决了。

localStorage是window上的。所以不需要写this.localStorage，你这里的this，是指vue实例。

方案一、

// 这里写的答案是指data.body.data是JSON。不是JSON则不需要JSON.parse和JSON.stringify

存储：localStorage.data = JSON.stringify(data.body.data);

获取：JSON.parse(localStorage.data);

方案二、

存储：localStorage.setItem('data',JSON.stringify(data.body.data));

获取：JSON.parse(localStorage.getItem('data'));