Apollo-link-rest: الرؤوس: مشكلات توافق Polyfill / قابلة للتكرار [Edge]

@ val-samonte أوصيك باستخدام Polyfill مثل هذا: https://github.com/jimmywarting/fetch-headers

شكرًا لك ، سأحاول هذا ومعرفة ما إذا كان يحل المشكلة. سوف يغلق هذا بعد ذلك.

fbartho آسف يبدو أنه لا تزال هناك مشكلة. بعد تنفيذ polyfill الذي قدمته ، أتلقى هذا الخطأ:

بعد تتبع المكدس ، يكون في هذا الكود:

صححني إذا كنت مخطئًا ، ولكن كما أفهم ، يجب أن يكون هذا التيار مثيلًا لـ Header right؟ عند التحقق من https://developer.mozilla.org/en-US/docs/Web/API/Headers ، فإنه لا يحتوي على طريقة forEach ، لذلك أفترض أن هذا يجب أن يكون مجموعة من الرؤوس؟

وفقًا لتلك الصفحة التي قمت بالربط بها ، من المفترض أن تحتوي العناوين على طريقة forEach ؟ ربما تكون رؤوس polyfill التي ربطتها بها خاطئة؟

بالنظر إلى اختبارات وحدة polyfill ، لديهم واحدًا يدعي أن الرؤوس يجب أن تحتوي على طريقة forEach
https://github.com/jimmywarting/fetch-headers/blob/614411d49505db07b350f7afa02290fae2170f56/test/test.js#L107 -L122

هل اخترت مكتبة بوليفيل مختلفة؟

يا سيئ ، لم أره على اللوحة الجانبية. على أي حال ، نعم يمكنني أن أؤكد أنني أستخدم polyfill الصحيح:

لقد أنشأت مشروعي باستخدام تطبيق create-react-app وأخرجته منه ، وقمت بتحرير ملف config / polyfill.js وأضفت هذا polyfill أسفل whatwg-fetch مباشرة

require('whatwg-fetch');
self.Headers = require('fetch-headers');

هل أفعل ذلك خطأ؟

تقول تجربتي أنه من أجل polyfill ، يجب أن يكون لديك خط مثل:
global.Headers = global.Headers || require('fetch-headers');

إخلاء المسؤولية: ليس لدي الكثير من الإلمام بـ create-react-app و config/polyfill.js . أنا أعمل أيضًا في TypeScript. لذا فإن الكود الفعلي (لأن Android يحتاج إلى polyfill) هو كما يلي:

import PolyfillHeaders = require("fetch-headers");
if (global.Headers == null) {
    global.Headers = PolyfillHeaders;
}

ملاحظة ، يجب أن أنقل الاستيراد إلى if-block كاستيراد ديناميكي. (احد هذه الايام).

آه نعم ، هذا أفضل بكثير ، سأحاول ذلك.

آه أجل ، الآن أتذكر. السبب في أنني قمت بتعيينه مباشرة هو أن Edge يواجه مشكلات في رأسه الحالي ، لذا فإن global.Headers = global.Headers || require('fetch-headers'); غير قابل للتطبيق.

لقد جربت هذا أيضًا وعدت لأواجه نفس الخطأ الذي نشرته.

لكن نعم ، حتى الكروم لا يحتوي على الرؤوس للجميع ، وكنت أتساءل أيضًا لماذا لا يتوفر MDN على الجدول المتوافق أدناه. هل يمكننا الحصول على حل لهذا في هذه الأثناء؟

يسعدني قبول العلاقات العامة التي تستخدم طريقة بديلة لتكرار الرؤوس. أعتقد أن المواصفات تفرض التوافق مع العناوين iterable ، لذا إذا قمت بتبديل الكود forEach إلى Iterable ، فسيكون ذلك جيدًا بالنسبة لي. - أعتقد أن الناس في نهاية المطاف بحاجة إلى تعويض es2015.iterable بدلاً من ذلك حتى ينجح ذلك ، لذا ... هذه مشكلة.

أرى! شكرًا لك ، سأحاول تقديم PR عندما أكون متاحًا. سررت بالمساعدة.

ملاحظة: يعتقد TypeScript أن Headers يجب أن يكون له طريقة forEach أيضًا.

سأغلق هذه المشكلة لأننا أجبنا / حلنا السؤال الأصلي @ val-samonte - ولكن لا تتردد في إرسال PR للاستخدام المتكرر بدلاً من forEach !

@ فال سامونتي هل حصلت على فرصة للنظر في هذا؟
إذا لم يكن الأمر كذلك ، يمكنني إلقاء نظرة ورفع العلاقات العامة لأنني أيضًا أواجه نفس المشكلة في IE11.

كان يفكر في استبدال

current.forEach(function (value, key) {
    accumulator.append(key, value);
});

مع...

for (var pair of current.entries()) {
    accumulator.append(pair[0], pair[1]);
}

إذا كنت تبحث عن أقصى قدر من التوافق ، فقد ترغب فقط في القيام بما يلي: for const key in current لست متأكدًا من أن الإدخالات () كانت متاحة في وقت أبكر بكثير من forEach

@ val-samonte يحدث هذا لأن headers param هو undefined في normalizeHeaders الوظيفة https://github.com/apollographql/apollo-link-rest/blob/master/src /restLink.ts#L487

يؤدي استدعاء new Headers بـ undefined كمعامل إلى ظهور هذا الخطأ TypeError.

حتى يتم حل هذا ، سيكون الإصلاح السريع مجرد إضافة بعض معلمات الرأس لإنشاء RestLink.
فمثلا:

const authRestLink = new RestLink({
  uri: `${baseUrl}/1.0/auth/`,
  credentials: 'same-origin',
  headers: {
    'Content-Type': 'application/json'
  },
});

@ val-samonte يحدث هذا لأن headers param هو undefined في normalizeHeaders الوظيفة https://github.com/apollographql/apollo-link-rest/blob/master/src /restLink.ts#L487

يؤدي استدعاء new Headers بـ undefined كمعامل إلى ظهور هذا الخطأ TypeError.

حتى يتم حل هذا ، سيكون الإصلاح السريع مجرد إضافة بعض معلمات الرأس لإنشاء RestLink.
فمثلا:

const authRestLink = new RestLink({
  uri: `${baseUrl}/1.0/auth/`,
  credentials: 'same-origin',
  headers: {
    'Content-Type': 'application/json'
  },
});

@ stefan-djokic هل تم حل هذه المشكلة؟ واجهت أيضًا نفس المشكلة ، ولكن ليس في متصفح Edge. أنا أستخدم weixin لتضمين apollo-link-rest ، ولا توجد رؤوس في البيئة ، ولا توجد رؤوس لواجهة برمجة التطبيقات الخاصة بهم. هل يمكنك تقديم المساعدة لبعض الحلول لاختراق أو تخطي الأخطاء التي واجهناها؟ نقدر كثيرًا إذا كان بإمكانك تقديم أي تلميحات أو مساعدة.