React Native用fetch调用.net mvc webapi（七）

用到知识：

1. fetch的get,post

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

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

注意问题：

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

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

con

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

Network request faild。

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

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);

});

}

React Native用fetch调用.net mvc webapi（七）