网络请求方式二

发表于 | 分类于

fetch的使用

一个基本的 fetch请求：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const options = {
    method:'POST',  // 请求参数
    headers:{
        'Content-Type':'application/json' // 设置请求头
    },
    body:JSON.stringify({name:'123'}), // 请求参数
    credentials:'some-origin', // cookie设置
    mode:'cors' //跨域
}
fetch('http://www.xxx.com',options)
.then(function(response){
    return response.json()
})
.then(function(myjson){
    console.log(myjson) // 响应数据
})
.then(function(err){
    conosle.log(err) 
// 异常处理
})

FetchAPI提供了一个全局的 fetch()方法，以及几个辅助对象来发起一个网络请求。
image

fetch()

fetch()方法用于发起获取资源的请求。它返回一个 promise，这个 promise 会在请求响应后被 resolve，并传回 Response 对象。

headers

可以通过 Headers()构造函数来创建一个你自己的 headers对象，相当于 response/request的头信息，可以使你查询到这些头信息，或者针对不同的结果做不同的操作。

1
2
var myHeaders = new Headers()
myHeaders.append('Content-Type','text/plain')

Request

通过 Request()构造函数可以创建一个 Request对象，这个对象可以作为 fetch函数的第二个参数。

Response

在 fetch()处理完 promises之后返回一个 Response实例，也可以手动创建一个 Response实例。

跨域总结

谈到网络请求，就不得不提跨域。

浏览器的同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。通常不允许不同源间的读操作。

跨域条件：协议，域名，端口，有一个不同就算跨域。

下面是解决跨域的几种方式：

nginx

使用 nginx反向代理实现跨域.

cors

CORS是一个 W3C标准，全称是”跨域资源共享” （Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出 XMLHttpRequest请求。

服务端设置 Access-Control-Allow-Origin就可以开启 CORS。该属性表示哪些域名可以访问资源，如果设置通配符则表示所有网站都可以访问资源。

1
2
3
4
5
app.all('*',function(req,res,next){
    res.header('Access-Control-Allow-Origin','*')
    res.header('Access-Control-Allow-Headers','X-Requested-With')
    res.header('Access-Control-Allow-Mothods','PUT,POST,GET,DELETE,OPTIONS')
})

jsonp

script标签的 src属性中的链接可以访问跨域的 js脚本，利用这个特性，服务端不再返回 JSON格式的数据，而是返回一段调用某个函数的 js代码，在 src中进行了调用，这样实现了跨域。

jquery对 jsonp的支持:

1
2
3
4
5
6
7
8
9
10
$.ajax({
    type:'get',
    url:'http"//xxxx',
    dataType:'jsonp',
    jsonp:'callback',
    jsonpCallback:'doo',
    success:function(data){
        console.log(data)
    }
})

fetch、axios等并没有直接提供对 jsonp的支持，如果需要使用这种方式，我们可以尝试进行手动封装：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
(function(window,document) {
"use strict";
var jsonp = function (url,data,callback) {
// 1.将传入的data数据转化为url字符串形式       
// {id:1,name:'jack'} => id=1&name=jack
var dataString = url.indexof('?') == -1 ? '?': '&';       
for(var key in data){
   dataString += key + '='+ data[key] + '&';
};
        
// 2 处理url中的回调函数        
// cbFuncName回调函数的名字 ：my_json_cb_名字的前缀 + 随机数（把小数点去掉）
        
var cbFuncName = 'my_json_cb_'+ Math.random().toString().replace('.','');
	dataString += 'callback='+ cbFuncName;
// 3.创建一个script标签并插入到页面中        
var scriptEle = document.createElement('script');
	scriptEle.src = url + dataString;
        
// 4.挂载回调函数

window[cbFuncName] = function(data) {
	callback(data);
// 处理完回调函数的数据之后，删除jsonp的script标签
  	document.body.removeChild(scriptEle);

}
  document.body.appendChild(scriptEle);

}

 window.$jsonp = jsonp;

})(window,document)

postMessage跨域

postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//捕获iframe
var domain = 'http://scriptandstyle.com';
var iframe = document.getElementById('myIFrame').contentWindow;
//发送消息
setInterval(function(){
	var message = 'Hello!  The time is: '+ (new Date().getTime());
    console.log('blog.local:  sending message: '+ message);      
	//send the message and target URI
    iframe.postMessage(message,domain);
},6000);

//响应事件
window.addEventListener('message',function (event) {    
	if(event.origin !== 'http://davidwalsh.name') return;
    console.log('message received:  '+ event.data,event);

    event.source.postMessage('holla back youngin!',event.origin);
},false);

postMessage跨域适用于以下场景：同浏览器多窗口间跨域通信、 iframe间跨域通信。

WebSocket

WebSocket 是一种双向通信协议，在建立连接之后， WebSocket的 server与 client都能主动向对方发送或接收数据而不受同源策略的限制。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

function WebSocketTest(){
    if("WebSocket" in window){
        alert("您的浏览器支持 WebSocket!");
        // 打开一个 web socket
        var ws = new WebSocket("ws://localhost:3000/abcd");
        ws.onopen = function(){   
		// Web Socket 已连接上，使用 send() 方法发送数据
            ws.send("发送数据");
            alert("数据发送中...");

         };
        ws.onmessage = function(evt) {                 
			var received_msg = evt.data;
             alert("数据已接收...");

        };

        ws.onclose = function(){                  
		// 关闭 websocket
             alert("连接已关闭...");

        };

 } 
else
	{               
	// 浏览器不支持 WebSocket
      alert("您的浏览器不支持 WebSocket!");

   }

}
-------------本文结束感谢您的阅读-------------