澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

澳门新浦京娱乐场网站:跨域请求兼容,Native网

IE9 跨域请求兼容

2018/05/31 · JavaScript · 跨域

原文出处: CntChen   

React Native中虽然也内置了XMLHttpRequest 网络请求API(也就是俗称的ajax),但XMLHttpRequest 是一个设计粗糙的 API,不符合职责分离的原则,配置和调用方式非常混乱,而且基于事件的异步模型写起来也没有现代的 Promise 友好。而Fetch 的出现就是为了解决 XHR 的问题,所以ReactNative官方推荐使用Fetch API。http://blog.csdn.NET/withings/article/details/71331726

现在应该很少有人用原生的JS内置XMLHttpRequest对象写异步调用了,仍然用的比较多的应该是Jquery的ajax方法,例如:

语法说明

fetch(url, options).then(function(response) {
  // handle HTTP response
}, function(error) {
  // handle network error
})

前几天用vue-resource调用接口,用post方式给后端,发现后端php接受不到数据,这好奇怪,最后发现提交给后端的时候 需要加一个参数

IE9 跨域请求兼容

Chrome: You will die! IE9: Not today!

1
2
Chrome:  You will die!
IE9:     Not today!

fetch请求示例如下:

$.ajax({
   type: 'get',
   url: location.herf,
   success: function(data){
       console.log(data);
   }
})

实例

//兼容包
require('babel-polyfill')
require('es6-promise').polyfill()

import 'whatwg-fetch'

fetch(url, {
  method: "POST",
  body: JSON.stringify(data),
  headers: {
    "Content-Type": "application/json"
  },
  credentials: "same-origin"
}).then(function(response) {
  response.status     //=> number 100–599
  response.statusText //=> String
  response.headers    //=> Headers
  response.url        //=> String

  response.text().then(function(responseText) { ... })
}, function(error) {
  error.message //=> String
})

就是:emulateJSON : true 这句话的意思是 将request body以application/x-www-form-urlencoded content type发送

背景

搭建公司官网的框架时采用了 vuejs, 使用 history router mode 来做 SEO 优化, 使用 fetch 做网络请求, fetch 用 whatwg-fetch 做 polyfill. 根据百度浏览器市场份额统计, 2017年全年 IE9 的占有率达到 9.50%, 并且 vue 框架也是兼容到 IE9, 所以项目要求兼容到 IE9.

但是 fetch polyfill 并不兼容 IE9, 这篇文章追溯问题原因并提出解决方法.

return fetch('http://facebook.github.io/react-native/movies.json')
    .then((response) => response.json())
    .then((responseJson) => {
      return responseJson.movies;
    })
    .catch((error) => {
      console.error(error);
    });```
Fetch API的详细介绍及使用说明请参考如下文章:
  [React Native 网络请求官方文档](https://github.com/reactnativecn/react-native-docs-cn/blob/master/docs/0.31/network.md)

  [深入浅出Fetch API](http://web.jobbole.com/84924/)

  [传统 Ajax 已死,Fetch 永生](https://github.com/camsong/blog/issues/2)

  [【翻译】这个API很“迷人”——(新的Fetch API)](https://www.w3ctech.com/topic/854?utm_source=tuicool&utm_medium=referral)

#使用Promise封装fetch请求

由于在项目中很多地方都需要用到网络请求,为了使用上的方便,使用ES6的Promise来封装fetch网络请求,代码如下:

最近写一个demo用到了fetch API,顿时觉得比ajax好用n倍,遂记录之。

url

定义要获取的资源。这可能是:

  • 一个 USVString 字符串,包含要获取资源的 URL。
  • 一个 Request 对象。

上个小demo看下

问题: 访问拒绝

在 IE9 下打开页面, 发现 fetch 请求报了Unhandled promise rejectionError: 拒绝访问:

  • IE9
    澳门新浦京娱乐场网站 1
  • IE11 开 IE9 调试模式
    澳门新浦京娱乐场网站 2

怀疑是 fetch 的兼容问题, 查看一下版本:

$npm list whatwg-fetch project └── whatwg-fetch@2.0.3

1
2
3
$npm list whatwg-fetch    
project
└── whatwg-fetch@2.0.3

查看了一下whatwg-fetch 兼容性: 只支持到 IE10. 然后看到 whatwg-fetchv0.11 可以兼容 IE9, 那就降级一下吧:

$ npm uninstall whatwg-fetch removed 1 package in 4.851s $ npm install whatwg-fetch@0.11 whatwg-fetch@0.11.1 added 1 package in 5.96s

1
2
3
4
5
6
$ npm uninstall whatwg-fetch
removed 1 package in 4.851s
 
$ npm install whatwg-fetch@0.11
whatwg-fetch@0.11.1
added 1 package in 5.96s

再试一下, 发现还是一样的问题.

let common_url = ''; //服务器地址
let token = '';
/**

fetch 介绍

fetch API 来源于 Promise ,可参见:Promise;

fetch的API 也可以参见:fetch;

fetch()方法调用两个参数:

fetch(input, init)

其中:
input

  • 定义要获取的资源。这可能是:一个 USVString 字符串,包含要获取资源的 URL。一些浏览器会接受 blob: 和 data:
  • 作为 schemes.一个 Request 对象。

input直白来说等于ajax中传入的url;

fetch()另一个参数 init可以配置其他请求相关参数,相当于ajax里的type,这个参数是可选的,包括:

method: 请求使用的方法,如 GET、POST.
headers: 请求的头信息,形式为 Headers 对象或 ByteString。
body: 请求的 body 信息,可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。(如果是 GET 或 HEAD 方法,则不能包含 body 信息)
mode: 请求的模式,如 cors、 no-cors 或者 same-origin。
credentials: 请求的 credentials,如 omit、same-origin 或者 include。
cache: 请求的 cache 模式: default, no-store, reload, no-cache, force-cache, or only-if-cached。

fetch()的success callback 是用 .then()完成的,实际上按照我的理解,fetch()就是一个Promise对象的实例,Promise对象实例如下:

new Promise(
    /* executor */
    function(resolve, reject) {...}
);

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

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

所以fetch()中,通过.then()调用异步成功函数resolve,通过.catch()调用异步失败函数reject;
拼装在一起,就有:

fetch(location.herf, {
    method: "get"
}).then(function(response) {
    return response.text()
}).then(function(data) {
    console.log(data)
}).catch(function(e) {
  console.log("Oops, error");
});

这其中,第一步.then()将异步数据处理为text,如果需要json数据,只需要 :

function(response) {return response.json()}

用es6箭头函数写,就是:

fetch(url).then(res => res.json())
  .then(data => console.log(data))
  .catch(e => console.log("Oops, error", e));

options(可选)

一个配置项对象,包括所有对请求的设置。可选的参数有:

  • method: 请求使用的方法,如 GET、POST。
  • headers: 请求的头信息,形式为 Headers 对象或 ByteString。
  • body: 请求的 body 信息:可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
  • mode: 请求的模式,如 cors、 no-cors 或者 same-origin。
  • credentials: 请求的 credentials,如 omit、same-origin 或者 include。
  • cache: 请求的 cache 模式: default, no-store, reload, no-cache, force-cache, 或者 only-if-cached。

澳门新浦京娱乐场网站 3

问题原因: IE9 XMLHttpRequest 不支持 CORS

fetch 的 polyfill 采用了 XMLHttpRequest 实现, 但是在 IE9 下面, XMLHttpRequest 是不支持跨域请求的. IE10 的 XMLHttpRequest 支持跨域, 而 IE8, IE9 需要使用 XDomainRequest 来实现跨域.

那就用 XDomainRequest 实现异步请求, 代码:

function fetchIe9(url, options = {}) => { if (window.XDomainRequest) { // // only support GET and POST method // request and response content type should be JSON // without response status code return new Promise((resolve, reject) => { const method = options.method || 'GET'; const timeout = options.timeout || 30000; let data = options.body || options.params || {}; if (data instanceof Object) { data = JSON.stringify(data); } const XDR = new XDomainRequest(); XDR.open(method, url); XDR.timeout = timeout; XDR.onload = () => { try { const json = JSON.parse(XDR.responseText); return resolve(json.data); } catch (e) { reject(e); } return reject({}); }; XDR.ontimeout = () => reject('XDomainRequest timeout'); XDR.onerror = () => reject('XDomainRequest error'); XDR.send(data); }); } else { // native fetch or polyfill fetch(XMLHttpRequest) // fetch... } }

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
35
function fetchIe9(url, options = {}) => {
  if (window.XDomainRequest) {
    // https://developer.mozilla.org/en-US/docs/Web/API/XDomainRequest
    // only support GET and POST method
    // request and response content type should be JSON
    // without response status code
    return new Promise((resolve, reject) => {
      const method = options.method || 'GET';
      const timeout = options.timeout || 30000;
      let data = options.body || options.params || {};
      if (data instanceof Object) {
        data = JSON.stringify(data);
      }
 
      const XDR = new XDomainRequest();
      XDR.open(method, url);
      XDR.timeout = timeout;
      XDR.onload = () => {
        try {
          const json = JSON.parse(XDR.responseText);
          return resolve(json.data);
        } catch (e) {
          reject(e);
        }
        return reject({});
      };
      XDR.ontimeout = () => reject('XDomainRequest timeout');
      XDR.onerror = () => reject('XDomainRequest error');
      XDR.send(data);
    });
  } else {
    // native fetch or polyfill fetch(XMLHttpRequest)
    // fetch...
  }
}

需要注意的是:

  • XDomainRequest 只支持 GET 和 POST mehtod
  • XDomainRequest 不支持带 cookie
  • XDomainRequest 不能设置 responseType, 通信双方需要约定数据格式
  • XDomainRequest 的响应没有 response status code

题外话: whatwg-fetch 一直采用 XMLHttpRequest 来做 polyfill, whatwg-fetch1.0  不支持 IE9, 并不是因为没有采用 XDomainRequest, 而是因为 IE9 的状态码不符合 fetch 规范, 而 polyfill 的目标是 polyfill 规范, 而不是做兼容.

  • @param {string} url 接口地址
  • @param {string} method 请求方法:GET、POST,只能大写
  • @param {JSON} [params=''] body的请求参数,默认为空
  • @return 返回Promise
    */
    function fetchRequest(url, method, params = ''){
    let header = {
    "Content-Type": "application/json;charset=UTF-8",
    "accesstoken":token //用户登陆后返回的token,某些涉及用户数据的接口需要在header中加上token
    };
    console.log('request url:',url,params); //打印请求参数
    if(params == ''){ //如果网络请求中没有参数
    return new Promise(function (resolve, reject) {
    fetch(common_url url, {
    method: method,
    headers: header
    }).then((response) => response.json())
    .then((responseData) => {
    console.log('res:',url,responseData); //网络请求成功返回的数据
    resolve(responseData);
    })
    .catch( (err) => {
    console.log('err:',url, err); //网络请求失败返回的数据
    reject(err);
    });
    });
    }else{ //如果网络请求中带有参数
    return new Promise(function (resolve, reject) {
    fetch(common_url url, {
    method: method,
    headers: header,
    body:JSON.stringify(params) //body参数,通常需要转换成字符串后服务器才能解析
    }).then((response) => response.json())
    .then((responseData) => {
    console.log('res:',url, responseData); //网络请求成功返回的数据
    resolve(responseData);
    })
    .catch( (err) => {
    console.log('err:',url, err); //网络请求失败返回的数据
    reject(err);
    });
    });
    }
    }```

fetch 兼容性

所有的ie都不支持fetch()方法,所以,考虑兼容性,需要对fetch()使用polyfill;
使用Fetch Polyfil来实现 fetch 功能:

npm install whatwg-fetch --save

对于ie,还要引入Promise:

npm install promise-polyfill --save-exact

考虑到跨域问题,需要使用Jsonp,那么还需要fetch-jsonp:

npm install fetch-jsonp

至此,则有:

import 'whatwg-fetch';
import Promise from 'promise-polyfill';
import fetchJsonp from 'fetch-jsonp';

fetchJsonp('/users.jsonp')
  .then(function(response) {
    return response.json()
  }).then(function(json) {
    console.log('parsed json', json)
  }).catch(function(ex) {
    console.log('parsing failed', ex)
  })

response

一个 Promise,resolve 时回传 Response 对象:

       _this.$http.post('/apiwx2/xqsj.php',
                 {
                   'token' : _this.token,
                   'house' : _this.userName,
                  },
                 {emulateJSON : true}
               ).then((response) => {
                   let ret = (new Function("return "   response.data))(); 
                   if(ret.code == 1){
                        _this.showSuccess = true; 
                      }else if(ret.code == 3){
                        _this.showError = true;
                      }else{
                        _this.tips(ret.msg);
                      }
              })
              .catch(function (response) {
                console.log(response)
              })

问题: 请求异常终止和挂起

写好了代码, 在 IE9 中, 网络请求非常诡异, 经常不行: 请求只持续了不到 1ms, 并且接收数据为 0B, 没有状态码; 但是在少数时候是可以成功请求并获取数据的.

  • IE9
    澳门新浦京娱乐场网站 4
  • IE11 开 E9 调试模式
    此时 IE11 的 IE9 调试模式是可以的, 看来模拟器还是模拟不到位.
    澳门新浦京娱乐场网站 5

查了好久, 终于看到一篇文章: Internet Explorer Aborting AJAX Requests : FIXED

IE timing out the request even though data is being transmitted.

主要的原因大概是 IE9 会将一个正在传输的请求 timeout 掉.

解决办法是:

  • 添加 onprogress 事件回调, 告知 IE9 这个请求是活动中的, 不要 timeout 掉.
  • 将请求的发送放到主线程之外, 保证 XDomainRequest 已经完全初始化好.

使用fetch请求,如果服务器返回的中文出现了乱码,则可以在服务器端设置如下代码解决:

Ref:

  • 传统 Ajax 已死,Fetch 永生
  • 使用更优雅的异步请求API——fetch
  • MDN web docs

属性:

  • status (number) - HTTP请求结果参数,在100–599 范围
  • statusText (String) - 服务器返回的状态报告
  • ok (boolean) - 如果返回200表示请求成功则为true
  • headers (Headers) - 返回头部信息,下面详细介绍
  • url (String) - 请求的地址

澳门新浦京娱乐场网站 6

最终代码

function fetchIe9(url, options = {}) => { if (window.XDomainRequest) { // // only support GET and POST method // request and response content type should be JSON // without response status code return new Promise((resolve, reject) => { const method = options.method || 'GET'; const timeout = options.timeout || 30000; let data = options.body || options.params || {}; if (data instanceof Object) { data = JSON.stringify(data); } const XDR = new XDomainRequest(); XDR.open(method, url); XDR.timeout = timeout; XDR.onload = () => { try { const json = JSON.parse(XDR.responseText); return resolve(json.data); } catch (e) { reject(e); } return reject({}); }; // fix random aborting: XDR.onprogress = () => {}; XDR.ontimeout = () => reject('XDomainRequest timeout'); XDR.onerror = () => reject('XDomainRequest error'); setTimeout(() => { XDR.send(data); }, 0); }); } else { // native fetch or polyfill fetch(XMLHttpRequest) // fetch... } }

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
35
36
37
38
39
function fetchIe9(url, options = {}) => {
  if (window.XDomainRequest) {
    // https://developer.mozilla.org/en-US/docs/Web/API/XDomainRequest
    // only support GET and POST method
    // request and response content type should be JSON
    // without response status code
    return new Promise((resolve, reject) => {
      const method = options.method || 'GET';
      const timeout = options.timeout || 30000;
      let data = options.body || options.params || {};
      if (data instanceof Object) {
        data = JSON.stringify(data);
      }
 
      const XDR = new XDomainRequest();
      XDR.open(method, url);
      XDR.timeout = timeout;
      XDR.onload = () => {
        try {
          const json = JSON.parse(XDR.responseText);
          return resolve(json.data);
        } catch (e) {
          reject(e);
        }
        return reject({});
      };
      // fix random aborting: https://cypressnorth.com/programming/internet-explorer-aborting-ajax-requests-fixed/
      XDR.onprogress = () => {};
      XDR.ontimeout = () => reject('XDomainRequest timeout');
      XDR.onerror = () => reject('XDomainRequest error');
      setTimeout(() => {
        XDR.send(data);
      }, 0);
    });
  } else {
    // native fetch or polyfill fetch(XMLHttpRequest)
    // fetch...
  }
}
produces="text/html;charset=UTF-8"```
#fetchRequest使用如下:
  GET请求:

方法:

  • text() - 以string的形式生成请求text
  • json() - 生成JSON.parse(responseText)的结果
  • blob() - 生成一个Blob
  • arrayBuffer() - 生成一个ArrayBuffer
  • formData() - 生成格式化的数据,可用于其他的请求

如果后端给你的数据 response.data 得不到 那就是后端给你的是字符串,需要你转成json即可,转的方式最好用原声的写

结论

  • IE9 发起跨域请求要使用 XDomainRequest, 因为 IE9 下的 XMLHttpRequest 不支持跨域调用.
  • XDomainRequest 只支持 GET 和 POST method, 并且没有 response status code, 可以说是不完善的 HTTP 异步请求对象.
  • XDomainRequest 不支持指定 responseType, 使用时建议请求和返回数据格式约定为 JSON.
  • whatwg-fetch1.0  不支持 IE9, 是因为 IE9 的状态码不符合 fetch 规范, 而 polyfill 的目标是 polyfill 规范, 而不是做兼容.

fetchRequest('app/book','GET')
.then( res=>{
//请求成功
if(res.header.statusCode == 'success'){
//这里设定服务器返回的header中statusCode为success时数据返回成功

其他方法:

  • clone()
  • Response.error()
  • Response.redirect()

这样即可 let ret = (new Function("return " response.data))();

References

  • XDomainRequest

  • XMLHttpRequest

  • XDomainRequest – Restrictions, Limitations and Workarounds

  • Internet Explorer Aborting AJAX Requests : FIXED

1 赞 收藏 评论

澳门新浦京娱乐场网站 7

    }else{
        //服务器返回异常,设定服务器返回的异常信息保存在 header.msgArray[0].desc
        console.log(res.header.msgArray[0].desc);
    }
}).catch( err=>{ 
    //请求失败
})```

response.headers

  • has(name) (boolean) - 判断是否存在该信息头
  • get(name) (String) - 获取信息头的数据
  • getAll(name) (Array) - 获取所有头部数据
  • set(name, value) - 设置信息头的参数
  • append(name, value) - 添加header的内容
  • delete(name) - 删除header的信息
  • forEach(function(value, name){ ... }, [thisContext]) - 循环读取header的信息

           console.log(ret.code)  //输出 1 的成功码

  • POST请求:

使用案例

最后附上所以方法

GET请求

  1. HTML
fetch('/users.html')
  .then(function(response) {
    return response.text()
  }).then(function(body) {
    document.body.innerHTML = body
  })
  1. IMAGE
var myImage = document.querySelector('img');

fetch('flowers.jpg')
  .then(function(response) {
    return response.blob();
  })
  .then(function(myBlob) {
    var objectURL = URL.createObjectURL(myBlob);
    myImage.src = objectURL;
  });
  1. JSON
fetch(url)
  .then(function(response) {
    return response.json();
  }).then(function(data) {
    console.log(data);
  }).catch(function(e) {
    console.log("Oops, error");
  });

使用 ES6 的 箭头函数 后:

fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(e => console.log("Oops, error", e))

response的数据

fetch('/users.json').then(function(response) {
  console.log(response.headers.get('Content-Type'))
  console.log(response.headers.get('Date'))
  console.log(response.status)
  console.log(response.statusText)
})

vue-resource 提供的便捷方法:

let params = {
    username:'admin',
    password:'123456'
}
fetchRequest('app/signin','POST',params)
    .then( res=>{
        //请求成功
        if(res.header.statusCode == 'success'){
            //这里设定服务器返回的header中statusCode为success时数据返回成功

        }else{
            //服务器返回异常,设定服务器返回的异常信息保存在 header.msgArray[0].desc 
            console.log(res.header.msgArray[0].desc);
        }
    }).catch( err=>{ 
        //请求失败
    })```
#fetch超时处理
由于原生的Fetch API 并不支持timeout属性,如果项目中需要控制fetch请求的超时时间,可以对fetch请求进一步封装实现timeout功能,代码如下:

  fetchRequest超时处理封装

POST请求

fetch('/users', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'Hubot',
    login: 'hubot',
  })
})

检查请求状态

function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response
  } else {
    var error = new Error(response.statusText)
    error.response = response
    throw error
  }
}

function parseJSON(response) {
  return response.json()
}

fetch('/users')
  .then(checkStatus)
  .then(parseJSON)
  .then(function(data) {
    console.log('request succeeded with JSON response', data)
  }).catch(function(error) {
    console.log('request failed', error)
  })
  • get(url, [data], [options]);

  • post(url, [data], [options]);

  • put(url, [data], [options]);

  • patch(url, [data], [options]);

  • delete(url, [data], [options]);

  • jsonp(url, [data], [options]);

/**

采用promise形式

Promise 对象是一个返回值的代理,这个返回值在promise对象创建时未必已知。它允许你为异步操作的成功或失败指定处理方法。 这使得异步方法可以像同步方法那样返回值:异步方法会返回一个包含了原返回值的 promise 对象来替代原返回值。

Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve方法和reject方法。如果异步操作成功,则用resolve方法将Promise对象的状态变为“成功”(即从pending变为resolved);如果异步操作失败,则用reject方法将状态变为“失败”(即从pending变为rejected)。

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

//创建一个promise对象
var promise = new Promise(function(resolve, reject) {
  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});
//then方法可以接受两个回调函数作为参数。
//第一个回调函数是Promise对象的状态变为Resolved时调用,第二个回调函数是Promise对象的状态变为Reject时调用。
//其中,第二个函数是可选的,不一定要提供。这两个函数都接受Promise对象传出的值作为参数。
promise.then(function(value) {
  // success
}, function(value) {
  // failure
});

那么结合promise后fetch的用法:

//Fetch.js
export function Fetch(url, options) {
  options.body = JSON.stringify(options.body)

  const defer = new Promise((resolve, reject) => {
    fetch(url, options)
      .then(response => {
        return response.json()
      })
      .then(data => {
        if (data.code === 0) {
          resolve(data) //返回成功数据
        } else {
            if (data.code === 401) {
            //失败后的一种状态
            } else {
            //失败的另一种状态
            }
          reject(data) //返回失败数据
        }
      })
      .catch(error => {
        //捕获异常
        console.log(error.msg)
        reject() 
      })
  })

  return defer
}

调用Fech方法:

import { Fetch } from './Fetch'

Fetch(getAPI('search'), {
  method: 'POST',
  options
})
.then(data => {
  console.log(data)
})

都是接受三个参数:

  • 让fetch也可以timeout

  • timeout不是请求连接超时的含义,它表示请求的response时间,包括请求的连接、服务器处理及服务器响应回来的时间

  • fetch的timeout即使超时发生了,本次请求也不会被abort丢弃掉,它在后台仍然会发送到服务器端,只是本次请求的响应内容被丢弃而已

  • @param {Promise} fetch_promise fetch请求返回的Promise

  • @param {number} [timeout=10000] 单位:毫秒,这里设置默认超时时间为10秒

  • @return 返回Promise
    */
    function timeout_fetch(fetch_promise,timeout = 10000) {
    let timeout_fn = null;

    //这是一个可以被reject的promise
    let timeout_promise = new Promise(function(resolve, reject) {
    timeout_fn = function() {
    reject('timeout promise');
    };
    });

    //这里使用Promise.race,以最快 resolve 或 reject 的结果来传入后续绑定的回调
    let abortable_promise = Promise.race([
    fetch_promise,
    timeout_promise
    ]);

    setTimeout(function() {
    timeout_fn();
    }, timeout);

    return abortable_promise ;
    }

支持状况及解决方案

原生支持率并不高,幸运的是,引入下面这些 polyfill 后可以完美支持 IE8 :
由于 IE8 是 ES3,需要引入 ES5 的 polyfill: es5-shim, es5-sham
引入 Promise 的 polyfill: es6-promise
引入 fetch 探测库:fetch-detector
引入 fetch 的 polyfill: fetch-ie8
可选:如果你还使用了 jsonp,引入 fetch-jsonp
可选:开启 Babel 的 runtime 模式,现在就使用 async/await

参考自: https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API

  • url(字符串),请求地址。可被options对象中url属性覆盖。

  • data(可选,字符串或对象),要发送的数据,可被options对象中的data属性覆盖。

  • options

let common_url = ''; //服务器地址
let token = '';
/**

请求选项对象

option对象的各属性及含义

参数 类型 描述
url string 请求的URL
method string 请求的HTTP方法,例如:'GET', 'POST'或其他HTTP方法
body Object,FormDatastring request body
params Object 请求的URL参数对象
headers Object request header
timeout number 单位为毫秒的请求超时时间 (0 表示无超时时间)
before function(request) 请求发送前的处理函数,类似于jQuery的beforeSend函数
progress function(event) ProgressEvent回调处理函数
credientials boolean 表示跨域请求时是否需要使用凭证
emulateHTTP boolean 发送PUT, PATCH, DELETE请求时以HTTP
emulateJSON boolean 将request body以application/x-www-form-urlencoded content type发送

url

url(字符串)请求的URL地址

method

method(字符串)默认值为GET,请求的HTTP方法(GET,POST等)

data

data(对象或字符串)
默认值为:'',需要发送给服务端的数据。
data属性的值对method为POST,PUT,DElETE等请求会作为请求体来传送,对于GET,JSONP等方式的请求将会拼接在URL查询参数中。

params

params(对象)
默认值为:{}用来替换url中的模板变量,模板变量中为匹配到的属性添加在URL地址后边作为查询参数。

Vue.http({
    url: 'http://example.com/{book}',
    params: {
        book: 'vue',
        cat: 1
    }
});

最终url为: http//example.com/vue?cat=1

headers

headers(对象)
默认值为:{},设置HTTP请求头

xhr

xhr(对象)默认值为null,该对象中属性都会应用到原生的xhr实例对象上。

upload

upload(对象)默认值为null,该对象的属性都会应用到原生的xhr实例对象的upload属性上。

jsonp

jsonp(字符串)
默认值为:callback,JSONP请求中回调函数的名字。

Vue.http({
    url: 'http://example.com/book',
    method: 'JSONP',
    jsonp: 'cb'
});

最终的URL地址为http://example.com/book?cb=xxx
xxx 为 vue-resource 生成的随机串。

tiemout

timeout(数值)
默认为:0,单位为 ms。表示请求超时时间。0表示没有超时限制。超市后,将会取消当前请求。
vue-resrouce内部通过拦截器注入超时取消逻辑。

if ( request.timeout ) {
    timeout = setTimeout(function () {
        reqest.cancel();
    }, request.timeout);
}
// 超时后,Promise会被 reject,错误回调会被执行。

beforeSend

beforeSend(函数)默认值为:null,该函数接受请求选项对象作为参数。该函数在发送请求之前执行,vue-resource内部在拦截器最前端调用该方法。

emulateHTTP

emulateHTTP(布尔值)
默认值为:false,当值为true是,用HTTP的POST方式PUT,PATCH,DELETE等请求,并设置请求头字段HTTP_Method_Override为原始请求方法。

如果Web服务器无法处理PUT, PATCH和DELETE这种REST风格的请求,你可以启用enulateHTTP现象。启用该选项后,请求会以普通的POST方法发出,并且HTTP头信息的X-HTTP-Method-Override属性会设置为实际的HTTP方法。

如果服务器无法处理PUT,PATCH和DELETE的请求。可以启用enulateHTTP。
启用之后,请求会以普通的POST方法发出,并且HTTP头信息的X-HTTP-Method-Override澳门新浦京娱乐场网站:跨域请求兼容,Native网络请求封装。属性会设置为实例的HTTP方法

Vue.http.options.emulateHTTP = true;

emulateJSON

emulateJSON(布尔值)
默认值为:false,当值为true并且data为对象时,设置请求头Content-Type的值为application/x-www-form-urlencoded

如果服务器无法处理编码为application/json的请求,可以启用emulateJSON选项。启用之后,请求会以application/x-www-form-urlencoded为MIME type,就像普通的HTML表单一样。

Vue.http.options.emulateJSON = true;

crossOrigin

crossOrigin(布尔值)

默认值为:null,表示是否跨域,如果没有设置该属性,vue-resource内部会判断浏览器当前URL和请求URL是否跨域。

if ( request.crossOrgin === null ) {
    request.corssOrigin = corssOrigin(request);
}
if ( request.corssOrigin ) {
    if ( !xhrCors ) {
        request.client = xdrClient;
    }
    request.enumlateHTTP = false;
}

如果最终crossOrigin为true并且浏览器不支持CORS,即不支持XMLHttpRequest2时,则会使用XDomainRequest来请求。目前XDomainRequest 只有IE8,IE9 浏览器支持用来进行AJAX跨域。

  • @param {string} url 接口地址
  • @param {string} method 请求方法:GET、POST,只能大写
  • @param {JSON} [params=''] body的请求参数,默认为空
  • @return 返回Promise
    */
    function fetchRequest(url, method, params = ''){
    let header = {
    "Content-Type": "application/json;charset=UTF-8",
    "accesstoken":token //用户登陆后返回的token,某些涉及用户数据的接口需要在header中加上token
    };
    console.log('request url:',url,params); //打印请求参数
    if(params == ''){ //如果网络请求中没有参数
    return new Promise(function (resolve, reject) {
    timeout_fetch(fetch(common_url url, {
    method: method,
    headers: header
    })).then((response) => response.json())
    .then((responseData) => {
    console.log('res:',url,responseData); //网络请求成功返回的数据
    resolve(responseData);
    })
    .catch( (err) => {
    console.log('err:',url, err); //网络请求失败返回的数据
    reject(err);
    });
    });
    }else{ //如果网络请求中带有参数
    return new Promise(function (resolve, reject) {
    timeout_fetch(fetch(common_url url, {
    method: method,
    headers: header,
    body:JSON.stringify(params) //body参数,通常需要转换成字符串后服务器才能解析
    })).then((response) => response.json())
    .then((responseData) => {
    console.log('res:',url, responseData); //网络请求成功返回的数据
    resolve(responseData);
    })
    .catch( (err) => {
    console.log('err:',url, err); //网络请求失败返回的数据
    reject(err);
    });
    });
    }
    }

reqponse对象

response对象包含服务端的数据,以及HTTP响应状态,响应头等信心。

  • data (对象或字符串): 服务端返回的数据,已使用 JSON.parse 解析。

  • ok(布尔值):当HTTP响应状态码在200~299区间时该值为true,表示响应成功。

  • status(数值): HTTP响应状态码。

  • statusText(字符串): HTTP响应状态文本描述。

  • headers(函数): 获取HTTP响应头信息,不传参表示获取整个响应头,返回一个相应头对象。传参表示获取对应的响应头信息。

  • request(对象)

RESTful调用

RESTful调用就是客户端通过HTTP动词来表示增,删,改,查实现对服务端数据操作的一种架构模式。

vue-resource提供全局调用Vue.resource澳门新浦京娱乐场网站,或者在组件实例上调用this.$rsource

resource(url ,[params], [actions], [options]);

url

澳门新浦京娱乐场网站:跨域请求兼容,Native网络请求封装。url(字符串)请求地址,可以包含占位符,会被parms对象中的同名属性的值替换。

this.$resource('/books/{cat}', { cat: 1 });
// 解析的URL为:/books/1

params

params(可选,对象)

参数对象,可用来提供url中的占位符,多出来的属性拼接url的查询参数。

actions

actions(可选,对象)

可以用来对已有的action进行配置,也可以用来定义新的action。

默认的aciton配置为:

Resource.actions = {
    get: {method: 'GET'},
    save: {method: 'POST'},
    query: {method: 'GET'},
    update: {method: 'PUT'},
    remove: {method: 'delete'},
    delete: {method: 'DELETE'}
}

修改默认值action配置

this.$resource(
    '/books/{cat}', 
    {
        cat: 1
    }, {
        charge: {
            method: 'POST',
            params: {
                charge: true
            }
        }
    });

actions对象中的单个action如charge对象可以包含options中的所有属性,且有限即高于iotions对象

options

options(可选,对象)


resource方法执行后返回一个包含了所有action方法名的对象。其包含自定义的action方法

resource请求数据

var resouce = this.$resource('/books/{id}');
// 查询
// 第一个参数为params对象,优先级高于resource发方法的params参数

resoure.get({id: 1}).then(function ( response ) {
    this.$set('item', response.item);
});

// 保存

// 第二个参数为要发送的数据
resource.seve({id: 1}, {item: this.item}).then(function () {
    // 请求成功回调
}, function () {
    // 请求失败回调
});

resource.delete({id: 1}).then(function () {
    // 请求成功回调
}, function () {
    // 请求失败回调    
});
加入超时处理的fetchRequest网络请求的使用方法跟没加入超时处理一样。 对于fetch网络请求的超时处理的封装参考下面这篇文章而写:

[让fetch也可以timeout](http://imweb.io/topic/57c6ea35808fd2fb204eef63)

转载http://blog.csdn.net/sinat_17775997/article/details/72511024

拦截器

可以全局进行拦截器设置。拦截器在发送请求前或响应返回时做一些特殊的处理。

拦截器的注册

Vue.http.interceptors.push({
    request: function ( request ) {
        // 更改请求类型为POST
        request.method = 'POST';
        return request;
    },
    response: function ( response ) {
        // 修改返回数据
        response.data = [{
            custom: 'custom'
        }];
        return response;
    }
});

工厂函数注册

Vue.http.interceptors.push(function () {
    return {
        request: function ( request ) {
            return request;
        },
        response: function ( response ) {
            return response;
        }
    }
});

Vue.http.interceptors.push(function ( request, next ) {
    // 请求发送前的处理逻辑

    next(function () {    
        // 请求发送后的处理逻辑
        // 更具请求的状态, response参数会返回给 successCallback或errorCallback
        return response
    });

});

实现的功能:

  • AJAX请求的loading界面
Vue.http.interceptors.push((request, next) => {
    // 通过控制 组件的`v-show`值显示loading组件
    loading.show = true;
    next((response) => {
        loading.show = false
        return response
    });
});
  • 请求失败时的提示对话框

跨域AJAX

vue-resource中用到的CORS特性,和 XHMLHttpRequest2的替代品 XDomainRequest

XDomain只支持GET和POST两种请求。如果要在vue-resource中使用其它方法请求,设置请求选项的emulateHTTP为true。

XHMLHttpRequest2 CORS

XHMLHttpRequest2提交AJAX请求还是和普通的XMLHttpRequset请求一样,只是增加了一些新特性。

在提交AJAX跨域请求时,需要知道当前浏览器是支持XHMLHttpRequest2, 判断方法使用 in操作符检测当前 XMLHttpRequest实例对象是否包含 withCredentials属性,如果包含则支持CORS

var xhrCors = 'withCredentials' in new XMLHttpRequest();

在支持CORS的情况下,还需啊哟服务端启用CORS支持。

例如:
需要从http://example.com:8080提交到http://example.com/8088,需要在http://example.com添加响应头

Access-Control-Allow-Origin: *

XDomainRequest

如果vue0resource不支持XMLHttpRequest2,则会降级使用用XDomainRequest

Promise

vue.resource基本HTTP调用和RESTful调用action方法执行后都会返回一个Promise对象。该Promise对象提供了then,catch,finally。

var promise - this.$http.post(
    'http://example.com/book/cretae',
    // 请求体中要发送给服务端数据
    {    
        cat: '1',
        name: 'newBook'
    }, {
        headers: {
            'Content-Type': 'x-www-form-urlencoded'
        }
    }
);

promise.then(function ( response ) {
    // 成功回调
}, function ( response ) {
    // 失败回调
});

promise.catch(function ( response ) {
    // 失败回调
});

promise.finally(function () {
    // 执行完成或者失败回调后都会执行此逻辑。
});

// 所有回调函数的this都指向组件实例

url模板

vue-resource 使用url-template库来解析url模板.

在vue-resourece方法请求传参时 可以在url中放置花括号包围的占位符。vue-resouce内部会使用url0template将占位符用params对象中的属性进行替换。

question

如何发送JSONP请求

vue-resouce提供三种调用方式进行跨域

全局方法

Vue.http({
    url: 'http://example.com/books',
    // 参数部分,将会拼接在url之后
    params: {
        cat: 1
    },
    method: 'JSONP'
})
    .then(function ( response ){

    }, function () {
        //error

    });

实例底层方法

http.$http({
    url: 'http://example.com/books',
    params: {
        cat: 1
    },
    method: 'JSONP'
})
    .then(function () {
        // this 指向当前组件实例
    }, function () {

    });

实例便捷方法

this.$http.jsonp(
    'http://www.example.com/books',
    {
        cat: 1
    }
)
    .then(function () {

    }, function () {

    });

修改数据类型

如何修改发送给服务端的数据类型

在默认情况下,对于PUT,PSOT,PATCH,DELETE等请求,请求头中的Content-Typeappliaction/json即JSON类型。有时候需要将数据提交为指定类型如application/x-www-form-urlencoded,multipart/form-data,txt/plain等。

全局headers配置

Vue.http.heaers.post['Content-Type'] = 'application/x-www-form-urlencoded'

实例配置

 

this.$http.post(
    'http://example.com/books',
    // 成功回调
    function ( data, status, request ) {
        if ( status == 200 ) {
            consl.dir(data);
        }
    },
    // 配置请求头
    headres: {
        'Content-Type': 'multipart/form-data'
    }
);
// 实例配置的优先级高于全局配置

本文由澳门新浦京娱乐场网站发布于新浦京娱乐场官网,转载请注明出处:澳门新浦京娱乐场网站:跨域请求兼容,Native网