[JavaScript知识库]路由传值、JQ、fetch

路由传值：

1.React路由取参数，有两种：

(1)?a=1:这种属于search字符串，在location.search里取值.

(2)/a/123:这种需要从match.params里取值.

(3)但无论哪种，路由获取到的值，是跳转后的那一刻的值，而不是实时更新的最新值.

2.路由-props信息

(1)react-router的路由信息，都是存储在组件的props里.

(2)由于我们写在父组件里的，是Route标签，我们需要显示的组件，是作为Route标签的属性而传进去的。所以作为Route标签的子组件而存在，因此，路由数据通过props传给我们的组件.

1)只有Route标签里传入的组件，才能通过props属性读取路由属性(除非你自己手动传给子组件).

2)每个能读取路由属性的组件，其match属性，获得的是当前级别的路由的属性(例如本级路由的match.url='/Params/2',那么上级路由的match.url='/Params/').

3.通配符说明：

(1):paramName-----匹配URL的一个部分，直到遇到下一个/、？、#为止，这个路劲参数可以通过this.props.params.paramName取出.

(2) ( )-----表示URL的这个部分是可选的.

(3) * -------匹配任意字符，直到模式里面的下一个字符为止，匹配方式是非贪婪模式.

(4)?** ------匹配任意字符，直到下一个/、？、#为止，匹配方式是贪婪模式.

加载jquery

1.下载jquery插件：

(1)npm install jquery --save-dev

(2)将配置webpack.config.js

1)将jquery配置成全局变量

2)首先要配置好jquery的别名，这里有三个全局变量名称，是为了适配不同的写法(有的插件不用$号而用jQuery)

3)查看webpack.config.js的配置.

2.不打包jquery:使用lgnorePlugin内部插件，不打包jquery,用法：

(1)new webpack.lgnorePlugin(requestRegExp,[ contextRegExp ])

(2)符合RegExp的不生成模块

1)requestRegExp 一个RegExp来测试请求.

2)contextRegExp ( 可选 )用于测试上下文(目录)的RegExp.

3)new webpack.lgnorePlugin(/\.\/jquery-last.js$/)? //排除不想打包进去的插件

3.配置文件说明

(1)new webpack.lgnorePlugin(/\.\/jquery-last.js$/) //排除不想打包进去的插件

(2)全局挂载插件：

new webpack.ProvidePlugin({

$:"jquery",

jQuery:"jquery",

"window,jQuery":"jquery"

})

1)在html里直接引入jquery：<script type="text/javascript" src="src/jquery-1.8.3.min.js"></script>

2)在index.js直接引入jquery模块就行：var $=require('jquery');

加载fetch插件

1.Fetch API是一种新规范，用来取代XMLHttpRequest对象，它主要有两个特点，一是接口合理化，Ajax是将所有不同性质的接口都放在XHR对象上，而Fetch是将它们分散在几个不用的对象上，设计更合理；二是Fetch操作返回Promise对象，避免了嵌套的回调函数.

2.fetchAPI安装方式(现在浏览器本身自带fetch不用下载) 例如：

(1)在项目里安装fetch:??npm install node-fetch-npm --save ( node安装 )

(2)在项目里引入： import fetch from? 'node-fetch-npm';

3.fetch用法：

语法：fetch(url,obj)

(1)url:为请求地址，obj为设置参数(json对象格式)包含以下内容：

1)method:请求使用的方法，如GET、"POST" 。

2)headers:请求的头信息，形式为Headers的对象或包含ByteString值的对象字面量.

3)body:请求的body信息：可能是一个Blob、BufferSource、FormData、URLSearchParams或者USVString对象，注意GET或HEAD方法的请求不能包含body信息.

4)mode:请求的模式，如cors、no-cors或者same-origin.

5)cache:请求的cache模式：default、no-store、reload、no-cache、force-cache或者only-if-cached.

(2)obj为设置参数(json对象格式)还包含一下内容：

1)credentials:请求的credentials,如omit、same-origin或者include。为了在当前域名内自动发送cookie，必须提供这个选项，从Chrome5.0开始，这个属性也可以接受FederatedCredential实例或是一个PasswordCredential实例。

2)redirect:可用的redirect模式:follow(自动重定向),error(如果产生重定向将自动终止并且抛出一个错误)，或者manual(手动处理重定向).

3)referrer:一个USVString,可以是no-referrer、client或一个URL.默认是client。

4)上面诸多option中，其实常用的就是method、headers、body以及mode等。

(3)header设置：可以为Headers对象，也可以是一个对象字面量，通常情况下对象字面量就足够.

例如：

headers:new Headers({

' Content-Type':'application/json'

})

或常用的

headers:{

" Content-Type":" application/x-www-from-urlencoded"

},

(4)response(传给then的回调函数可以接收一个参数，这个参数就是Response,它的属性基本上是只读属性.)用法如下：

1)Response.clone():创建一个Response对象的克隆.

2)Response.error():返回一个绑定了网络错误的新的Response对象.

3)Response.redirect():用另一个URL创建一个新的response.

4)Response.json():读取Response对象并且将它设置为已读(因为Responses对象被设置为了stream的方式，所以它们只能被读取一次)，并返回一个被解析为JSON格式的promise对象.

5)Response.text():读取Response对象并且将它设置为已读(因为Responses对象被设置为了stream的方式，所以它们只能被读取一次)，并返回一个被解析为USVString格式的promise对象.