اذهب إلى المحتوى
  • 0

استخدام ال authorization header مع fetch في React Native

Yomna Raouf

السؤال

أعمل على تطبيق و أحاول جلب بيانات من API ما عن طريق استخدام fetch، و قد قمت بجلب ال access token الصحيحة و قمت بحفظها في state  و لكن يبدو أنه لا يمكن تمريرها ك  authorization header لل Get Request.

var Products = React.createClass({
  getInitialState: function() {
    return {
      clientToken: false,
      loaded: false
    }
  },
  componentWillMount: function () {
    fetch(api.token.link, api.token.object)
      .then((response) => response.json())
      .then((responseData) => {
          console.log(responseData);
        this.setState({
          clientToken: responseData.access_token,
        });
      })
      .then(() => {
        this.getPosts();
      })
      .done();
  },
  getPosts: function() {
    var obj = {
      link: 'https://api.producthunt.com/v1/posts',
      object: {
        method: 'GET',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ' + this.state.clientToken,
          'Host': 'api.producthunt.com'
        }
      }
    }
    fetch(api.posts.link, obj)
      .then((response) => response.json())
      .then((responseData) => {
        console.log(responseData);
      })
      .done();
  },

حيث أنّي أحصل على رسالة الخطأ التالية:

{"error":"unauthorized_oauth", "error_description":"Please supply a valid access token. Refer to our api documentation about how to authorize an api request. Please also make sure you require the correct scopes. Eg \"private public\" for to access private endpoints."}

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

الخطأ هنا أنكي قمتي باستخدام ال fetch بطريقة خاطئة حيت أنها تتوقع 2 parameters

  1. endpoint
  2. object: يحتوي مثلاً علي ال body و ال headers لكن بصورة مباشرة وليس بداخل object آخر كما في المثال الخاص بك هكذا 
    // خطأ
    var obj = {
      link: 'https://api.producthunt.com/v1/posts',
      object: { // إزالة هذا المستوى
        method: 'GET',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ' + this.state.clientToken,
          'Host': 'api.producthunt.com'
        }
      }
    }
    
    // صح 
    var obj = {
      link: 'https://api.producthunt.com/v1/posts',
      method: 'GET',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + this.state.clientToken,
        'Host': 'api.producthunt.com'
      }
    }

     

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

المشكلة كما شرح المدرب محمد أنه تم وضع ال header وال method بداخل كائن آخر وهذا غير صحيح وبدلاً من إزالة هذا الكائن يمكن حل هذه  المشكلة باستخدام ال spread operator وهو (...) وهو يقوم بنشر محتويات الكائن كالتالي

fetch(api.posts.link, ...obj) // spread operator  تم إستخدام ال 
  .then((response) => response.json())
  .then((responseData) => {
  console.log(responseData);
}).done();

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...