HTTP的幂等性

HTTP协议本身是一种面向资源的应用层协议，但对HTTP协议的使用实际上存在着两种不同的方式：一种是RESTful的，它把HTTP当成应用层协议，比较忠实地遵守了HTTP协议的各种规定；另一种是SOA的，它并没有完全把HTTP当成应用层协议，而是把HTTP协议作为了传输层协议，然后在HTTP之上建立了自己的应用层协议。本文所讨论的HTTP幂等性主要针对RESTful风格的，不过正如上一节所看到的那样，幂等性并不属于特定的协议，它是分布式系统的一种特性；所以，不论是SOA还是RESTful的Web API设计都应该考虑幂等性。下面将介绍HTTP GET、DELETE、PUT、POST四种主要方法的语义和幂等性。

HTTP GET方法用于获取资源，不应有副作用，所以是幂等的。比如：GET http://www.bank.com/account/123456，不会改变资源的状态，不论调用一次还是N次都没有副作用。请注意，这里强调的是一次和N次具有相同的副作用，而不是每次GET的结果相同。GET http://www.news.com/latest-news这个HTTP请求可能会每次得到不同的结果，但它本身并没有产生任何副作用，因而是满足幂等性的。

HTTP DELETE方法用于删除资源，有副作用，但它应该满足幂等性。比如：DELETE http://www.forum.com/article/4231，调用一次和N次对系统产生的副作用是相同的，即删掉id为4231的帖子；因此，调用者可以多次调用或刷新页面而不必担心引起错误。

比较容易混淆的是HTTP POST和PUT。POST和PUT的区别容易被简单地误认为“POST表示创建资源，PUT表示更新资源”；而实际上，二者均可用于创建资源，更为本质的差别是在幂等性方面。在HTTP规范中对POST和PUT是这样定义的：

The POST method is used to request that the origin server accept the entity enclosed in the request as a new subordinate of the resource identified by the Request-URI in the Request-Line ...... If a resource has been created on the origin server, the response SHOULD be 201 (Created) and contain an entity which describes the status of the request and refers to the new resource, and a Location header.

The PUT method requests that the enclosed entity be stored under the supplied Request-URI. If the Request-URI refers to an already existing resource, the enclosed entity SHOULD be considered as a modified version of the one residing on the origin server. If the Request-URI does not point to an existing resource, and that URI is capable of being defined as a new resource by the requesting user agent, the origin server can create the resource with that URI.

POST所对应的URI并非创建的资源本身，而是资源的接收者。比如：POST http://www.forum.com/articles的语义是在http://www.forum.com/articles下创建一篇帖子，HTTP响应中应包含帖子的创建状态以及帖子的URI。两次相同的POST请求会在服务器端创建两份资源，它们具有不同的URI；所以，POST方法不具备幂等性。而PUT所对应的URI是要创建或更新的资源本身。比如：PUT http://www.forum/articles/4231的语义是创建或更新ID为4231的帖子。对同一URI进行多次PUT的副作用和一次PUT是相同的；因此，PUT方法具有幂等性。

在介绍了几种操作的语义和幂等性之后，我们来看看如何通过Web API的形式实现前面所提到的取款功能。很简单，用POST /tickets来实现create_ticket；用PUT /accounts/account_id/ticket_id?amount=xxx来实现idempotent_withdraw。值得注意的是严格来讲amount参数不应该作为URI的一部分，真正的URI应该是/accounts/account_id/ticket_id，而amount应该放在请求的body中。这种模式可以应用于很多场合，比如：论坛网站中防止意外的重复发帖。

总结

上面简单介绍了幂等性的概念，用幂等设计取代分布式事务的方法，以及HTTP主要方法的语义和幂等性特征。其实，如果要追根溯源，幂等性是数学中的一个概念，表达的是N次变换与1次变换的结果相同，有兴趣的读者可以从Wikipedia上进一步了解。

 ES6之前已经出现了js模块加载的方案，最主要的是CommonJS和AMD规范。commonjs主要应用于服务器，实现同步加载，如nodejs。AMD规范应用于浏览器，如requirejs，为异步加载。同时还有CMD规范，为同步加载方案如seaJS。

ES6在语言规格的层面上，实现了模块功能，而且实现得相当简单，完全可以取代现有的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。

ES6模块主要有两个功能：export和import

export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口

import用于在一个模块中加载另一个含有export接口的模块。

也就是说使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）。如下图(假设a和b文件在同一目录下)

a.js文件也可以按如下export语法写，但不如上边直观，不太推荐。

以上是export与module的基本用法，再进行拓展学习

前面的例子可以看出，b.js使用import命令的时候，用户需要知道a.js所暴露出的变量标识符，否则无法加载。可以使用export default命令，为模块指定默认输出，这样就不需要知道所要加载模块的变量名。

 最近在学习react-native,遇到调用后端接口的问题.看了看官方文档,推荐使用es6的fetch来与后端进行交互,在网上找了一些资料.在这里整理,方便以后查询.

1.RN官方文档中,可使用XMLHttpRequest

var request = new XMLHttpRequest(); request.onreadystatechange = (e) => { if (request.readyState !== 4) { return; } if (request.status === 200) { console.log('success', request.responseText); } else { console.warn('error'); } }; request.open('GET', 'https://mywebsite.com/endpoint.php'); request.send();

这是http的原生方法,这里不做多的介绍.

2.RN官方文档中,推荐使用fetch


fetch('https://mywebsite.com/endpoint/', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ firstParam: 'yourValue', secondParam: 'yourOtherValue', }) }).then(function(res){
console.log(res)
})
body中的数据就是我们需要向服务器提交的数据,比如用户名,密码等;如果上述body中的数据提交失败,那么你可能需要把数据转换成如下的表单提交的格式:

fetch('https://mywebsite.com/endpoint/', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, body: 'key1=value1&key2=value2' }).then(function(res){

　　console.log(res)
})
这样可以获取纯文本的返回数据.
如果你需要返回json格式的数据:
fetch('https://mywebsite.com/endpoint/').then(function(res) {

    if (res.ok) {

        res.json().then(function(obj) {

            // 这样数据就转换成json格式的了

        })

    }

}, function(ex) {

    console.log(ex)

})

fetch模拟表单提交:

构建问题

1. 如何在 head 里面引入js文件?

背景: 在<head>标签中，以inline的形式引入flexible.js文件。本项目主要为移动端项目，引入flexible.js 实现移动端适配问题。

Nuxt.js 通过 vue-meta 实现头部标签管理，通过查看文档发现，可以按照如下方式配置：

// nuxt.config.js head: {   script: [     { innerHTML: 'console.log("hello")', type: 'text/javascript', charset: 'utf-8'}   ] }

结果，生成 html:

<script data-n-head="true" type="text/javascript" charset="utf-8">console.log(&quot;hello&quot;)</script>

我们发现 vue-meta 把引号做了转义处理，加入 __dangerouslyDisableSanitizers: ['script'] 后，就不会再对这些字符做转义了，该字段使用需慎重！

接下来，要把 console.log("hello") 的内容替换成 flexible.js，配置升级之后：

head: {   script: [{ innerHTML: require('./assets/js/flexible'), type: 'text/javascript', charset: 'utf-8'}],   __dangerouslyDisableSanitizers: ['script'] }

踩坑成功，下一个坑...

2. 如何使用预处理器

背景：在组件中的<template>， <script> 或 <style> 上使用各种预处理器，加上处理器后，控制台报错。

<style lang="sass"> .red   color: red </style>

这个问题解决方法非常简单，只需要安装这些依赖就好。

npm install --save-dev node-sass sass-loader

但是解决过程并不是很顺利的，在阅读中文文档时，忽略版本号，按照上面的提示进行操作，发现不能成功，后来各种debug，最后发现了该解决方案。后知后觉的发现了中文文档的版本号过低，如果需要查看文档，一定要看最新版本的英文文档！

3. 如何使用px2rem

背景：在css中，写入px，通过px2rem loader，将px转换成rem

在以前的项目中，是通过 px2rem loader实现的，但是在Nuxt.js项目下，添加 css loader 还是很费力的，因为涉及到vue-loader。

想到了一个其他方案，可以使用 postcss 处理。可以在 nuxt.config.js 文件中添加配置，也可以在postcss.conf.js文件中添加。

build: {   postcss: [     require('postcss-px2rem')({       remUnit: 75 // 转换基本单位     })   ] },

4. 如何拓展 webpack 配置

背景：给 utils 目录添加别名

刚刚说到，Nuxt.js内置了 webpack 配置，如果想要拓展配置，可以在 nuxt.config.js 文件中添加。同时也可以在该文件中，将配置信息打印出来。

extend (config, ctx) {   console.log('webpack config:', config)   if (ctx.isClient) {     // 添加 alias 配置     Object.assign(config.resolve.alias, {       'utils': path.resolve(__dirname, 'utils')     })   } }

5. 如何添加 vue plugin

背景：自己封装了一个 toast vue plugin，由于 vue 实例化的过程没有暴露出来，不知道在哪个时机注入进去。

可以在 nuxt.config.js 中添加 plugins 配置，这样插件就会在 Nuxt.js 应用初始化之前被加载导入。

module.exports = {   plugins: ['~plugins/toast'] }

~plugins/toast.js 文件：

import Vue from 'vue' import toast from '../utils/toast' import '../assets/css/toast.css'  Vue.use(toast)

6.如何修改环境变量 NODE_ENV

背景：在项目中，设置 3个 NODE_ENV 的值，来对应不同的版本。development，本地开发；release，预发布版本；production，线上版本。其中，预发布版本比production版本，多出vconsole。

// package.json "scripts": {   "buildDev": "cross-env NODE_ENV=release nuxt build && backpack build",   "startDev": "cross-env NODE_ENV=release PORT=3000 node build/main.js"   },

打印 process.env.NODE_ENV 依旧是，production。

在 backpack 的源码中，找到了答案，在 执行 backpack build 命令时，会把 process.env.NODE_ENV 修改为 production，并且是写死的不可配置的......

无奈下，只能在 process.env 下，添加 __ENV 属性，代表 NODE_ENV

这时，在页面中打印出来的信息 process.env.__ENV undefined，但是可以打印出 process.env.NODE_ENV。

可以通过配置 nuxt.config.js 中的，env属性，解决该问题。

env: {   __ENV: process.env.__ENV }

开发问题

1. Window 或 Document 对象未定义？

背景: 在引入第三方插件，或者直接在代码中写 window 时，控制台会给出警告，window 未定义。

发生在这个问题的原因时，node服务端并没有window 或 document 对象。解决方法，通过 process.browser 来区分环境。

if (process.browser) {   // 引入第三方插件   require('***')   // 或者修改window对象下某一属性   window.mbk = {} }

 D:\code\nuxtjsdemo\node_modules\nuxt\lib\core\middleware\nuxt.js:72

      const policies = this.options.render.csp.policies ? {...this.options.rende r.csp.policies} : null  SyntaxError: Unexpected token ... 

平台环境
nodejs 8.2.0
vue-cli 2.9.3

写得很明确了

SyntaxError: Unexpected token ...

对象解构赋值语法报错

解决方案：

1. 查一下 node 9.x 已经支持 对象解构赋值了没有，换更新的nodejs
2. 如果还未支持，使用babel + babel 插件babel-plugin-transform-object-rest-spread

111