如何将progress事件添加到react-native-fetch-polyfill

时间:2018-01-22 12:48:54

标签: react-native fetch

我正在尝试使用timeoutonProgress功能获取请求但无法实现fetch('https://jsonplaceholder.typicode.com/posts', { method: 'POST', body: JSON.stringify({ title: 'foo', body: 'bar', userId: 1 }), headers: { "Content-type": "application/json; charset=UTF-8" } }) .then(function(data) { console.log(data); }) .catch(function(error) { console.log('Fetch Error :-S', error); }); 事件:

onUploadProgress: function (progressEvent)

我不知道在哪里添加:

function Add-SelfSignedCertificate
{
    [CmdletBinding()]
    param
    (
            [Parameter(Mandatory=$True, ValueFromPipelineByPropertyName=$True)]
            [Alias('cn')]
            [string]$CommonName
    )

    $name = new-object -com "X509Enrollment.CX500DistinguishedName.1"
    $name.Encode("CN=$CommonName", 0)

    $key = new-object -com "X509Enrollment.CX509PrivateKey.1"
    $key.ProviderName = "Microsoft RSA SChannel Cryptographic Provider"
    $key.KeySpec = 1
    $key.Length = 2048
    $key.SecurityDescriptor = "D:PAI(A;;0xd01f01ff;;;SY)(A;;0xd01f01ff;;;BA)(A;;0x80120089;;;NS)"
    $key.MachineContext = 1
    $key.Create()

    $serverauthoid = new-object -com "X509Enrollment.CObjectId.1"
    $serverauthoid.InitializeFromValue("1.3.6.1.5.5.7.3.1")
    $ekuoids = new-object -com "X509Enrollment.CObjectIds.1"
    $ekuoids.add($serverauthoid)
    $ekuext = new-object -com "X509Enrollment.CX509ExtensionEnhancedKeyUsage.1"
    $ekuext.InitializeEncode($ekuoids)

    $cert = new-object -com "X509Enrollment.CX509CertificateRequestCertificate.1"
    $cert.InitializeFromPrivateKey(2, $key, "")
    $cert.Subject = $name
    $cert.Issuer = $cert.Subject
    $cert.NotBefore = get-date
    $cert.NotAfter = $cert.NotBefore.AddYears(5)
    $cert.X509Extensions.Add($ekuext)
    $cert.Encode()

    $enrollment = new-object -com "X509Enrollment.CX509Enrollment.1"
    $enrollment.InitializeFromRequest($cert)
    $enrollment.CertificateFriendlyName = $CommonName
    $certdata = $enrollment.CreateRequest(0)
    $enrollment.InstallResponse(2, $certdata, 0, "")
}

3 个答案:

答案 0 :(得分:1)

该库不支持进度处理程序。如果您需要此功能并希望使用该库,那么您最简单的方法就是分叉库并自行添加功能:

1)在GitHub上分叉存储库。

2)编辑存储库中的js文件。例如,添加您需要的回调作为函数的第三个参数:

export default function fetchPolyfill (input, init) {
// becomes
export default function fetchPolyfill (input, init, onUploadProgress) {

// add this somewhere inside
if (onUploadProgress)
    xhr.upload.onprogress = onUploadProgress

3)编辑你的包json以包括
"react-native-fetch-polyfill": "git://github.com/youraccount/react-native-fetch-polyfill"
并运行npm install

1a)当然,你可能只是复制脚本并在计算机上本地编辑它而不需要处理GitHub,如果你没有处理节点模块就可以了。或者下载整个文件夹并将其用作包。

答案 1 :(得分:0)

您可以使用axios

已经具有这样的功能(onUploadProgress

答案 2 :(得分:0)

在幕后,fetch使用React-Native XMLHttpRequest对象; react-native-fetch-polyfill也是如此。这不是浏览器中使用的常规xhr对象,因为实际请求是从本机端发送的。

据我所知,RN fetchreact-native-fetch-polyfill都不支持上传进度,但您可以直接使用XMLHttpRequest来执行此操作:

const xhr = new XMLHttpRequest();
xhr.upload.onprogress = (progressEvent) => {
    //handle progress here, you can use progressEvent.loaded, progressEvent.total to calculate the progress
};

const body = JSON.stringify({
  title: 'foo',
  body: 'bar',
  userId: 1
});
xhr.setRequestHeader("Content-type", "application/json; charset=UTF-8");
xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts');
xhr.send(body);

您也可以自己添加超时处理:

xhr.timeout = 30 * 1000;

xhr.ontimeout = () => {
  //handle timeout here
}