网络请求

网络请求的封装

第一步：创建NetworkConfig.js

const  config = {
    api:{
        getBase:'https://api.apiopen.top/',//get域名
        postBase: 'https://cnodejs.org/api/',//post域名

        //其他接口地址
        getText: 'getSongPoetry',//获取诗词接口地址
        chexkText: 'v1/accesstoken',//校验接口地址
    },
}
module.exports = config;

第二步：创建RequestManager.js

import  queryString from 'query-string';
import React, { Component } from 'react';
import {
    FetchResult,
} from  'react-native';

import config from '../network/NetworkConfig';

export default class RequestManager extends Component{

  static get(url, params, callback){
      if(params){
        url = config.api.getBase + url + '?' + queryString.stringify(params);
      }
      fetch(url,{
          method:'GET',
      }).then((response) => response.json())
      .then((res) => {
          //根据后台判断是否请求成功
          callback(res,null);
      }).catch(error => {
          console.log(error);
          callback(null,error)
      });
    }

    static post(url,params,callback){
        fetch(config.api.postBase + url,{
            method:'POST',
            header:{
                'Accept':['application/json','text/json','text/plain','text/html'],
                'Content-Type':'application/json'
            },
            body:JSON.stringify(params),
        })
        .then((response) => response.json())
        .then((responseData) => {
            //根据后台判断是否请求成功
            callback(responseData,null);
        }).catch(error => {
            console.log(error);
            callback(null,error);
        });
    }
}

网络请求封装后的调用

第一步:Get方法的调用

componentDidMount() {
       RequestManager.get(config.api.getText,
       {
        page:1,
        count:20,
       },(json,error) => {
            if(error){
                alert(error);
            }else{
                arrMList = json.result;
                var num = Math.floor(Math.random()*10);
                this.setState({
                    display:arrMList[num].content,
                 });
            }
       });
}

第二步：Post方法的调用

 componentDidMount() {
    let url = config.api.chexkText;
     let obj = { accesstoken: 'f46b1568-a0c1-4b11-8904-d6c3d07ac026' };

       RequestManager.post(url,obj,(res,error) => {
           if(error){
               alert(error);
           }else{
               
           }
       });
}