React Native用fetch调用.net mvc webapi(七)

用到知识:

1. fetch的get,post

2. .net服务端api的跨域问题

3. 本地.net的服务端调试问题

注意问题:

1. 调用service时this的作用域问题

2. .net实现api的跨域允许, 在web.config进行如下配置:

React Native用fetch调用.net mvc webapi(七)_第1张图片
con

3. 直接使用vs调试模式下,使用地址localhost或者127.0.0.1发现react native无法调用,显示

Network request faild。

解决办法:配置服务系统到 IIS, 绑定其IP地址, 需要调试时,把VS附加到IIS进程 w3wp.exe.

React Native用fetch调用.net mvc webapi(七)_第2张图片


React Native用fetch调用.net mvc webapi(七)_第3张图片
React Native用fetch调用.net mvc webapi(七)_第4张图片

4. Asp.net服务端所有的api应该有返回值,不然在response.json()会报错, 要么服务端必须有返回值,要么前端换方式

具体实现:

1. 新建配置文件js用来存放api主域名地址如:

export const apiStr = 'https://facebook.github.io/';

2. 新建代码文件IndexPageService.js用来存放调用api的代码

a. fetch调用json文件示例代码:

export function getMovies(callBack) {

    fetch(apiStr + `react-native/movies.json`)

        .then((response) => response.json())

        .then((responseJson) => {

            callBack(responseJson);

        })

        .catch((error) => {

            console.error(error);

        });

}

调用示例:需要注意this作用域

var _self = this;

        getMovies((d) => {

            _self.setState({

                dataSource: d.movies

            });

        });

b. fetch调用api的get示例

//get example

export function getExample(callBack) {

    fetch("http://192.168.31.41:8080/API/CRMTest/GET", {

        method: "GET"

    }).then((response) => response.json())

        .then((responseJson) => {

            callBack(responseJson);

        })

        .catch((error) => {

            console.error(error);

        });

}

c. fetch调用api的post方式

//post example

export function postExample() {

    var testModel = {

        Id: 1,

        Name: 'name'

    };

    fetch("http://192.168.31.41:8080/API/CRMTest/SaveData", {

        method: "POST",

        headers: {

            "Accept": "application/json",

            'Content-Type': 'application/json',

        },

        body: JSON.stringify(testModel)

    }).then((response) =>

        response.json()

    ).then((responseJson) => {

        alert(responseJson);

    })

        .catch((error) => {

            console.error(error);

        });

}


Asp.net建WebApi简约示例项目步骤


React Native用fetch调用.net mvc webapi(七)_第5张图片


React Native用fetch调用.net mvc webapi(七)_第6张图片


React Native用fetch调用.net mvc webapi(七)_第7张图片


React Native用fetch调用.net mvc webapi(七)_第8张图片


React Native用fetch调用.net mvc webapi(七)_第9张图片


React Native用fetch调用.net mvc webapi(七)_第10张图片

你可能感兴趣的:(React Native用fetch调用.net mvc webapi(七))