ReactNative初体验请求与数据接口篇(一)

reactNative是支持fetch函数的，我们可以直接使用fetch，对于接口这块我把业务分成了如下几块业务

1.接口数据：之后导出API–请求地址

2.请求函数：之后导出HTTP–请求方法

3.封装使用方法：使用HTTP函数请求API

//接口拼接
const BASE_URL = 'http://txcourseapi.jsplusplus.com/';

const API = {
    getCourseDatas: BASE_URL + 'course/v2/get_course_datas',
    getCourses: BASE_URL + 'course/v2/get_courses/',
    getCourseFields: BASE_URL + 'course/v2/get_course_fields'
}
export {
  API
};

//请求函数
export default class HTTP {
  fetchGet (options) {
    return fetch(options.url)
      .then((response) => response.json())
      .then((responseJson) => {
        options.success(responseJson);
      })
      .catch((error) => {
        options.error(error);
      })
  }
}

//封装使用方法
import { API } from '../utils/config';
import HTTP from '../utils/http';

export default class IndexModel extends HTTP {
    getCourseDatas () {
        return new Promise((resolve) => {
      this.fetchGet({
        url: API.getCourseDatas,
        success (data) {
            resolve(data);
        },
        error (error) {
            console.error('error:' + error);
        }
      });
        });
    }
}

在主页面调用的时候，要先引入IndexModel，且实例化这个类

import IndexModel from '../models/Index';

//实例化类
const indexModel = new IndexModel();
 getCourseDatas () {
    indexModel.getCourseDatas().then((res) => {
     // 拿到数据
      const data = res.result;
    });
  }

这样就能拿到我们后端的接口数据了，是不是很简单？？