• fetch格式


    fetch('url'+参数a, { method: "GET", body: json } .then(res => response.json()) .then(console.log(json)) ) 

     

    一个发送post请求的示例:

    fetch("http://127.0.0.1:7777/postContent", {
      method: "POST",
      headers: {
          "Content-Type": "application/json",
      },
      mode: "cors",
      body: JSON.stringify({
          content: "留言内容"
      })
    }).then(function(res) {
      if (res.status === 200) {
          return res.json()
      } else {
          return Promise.reject(res.json())
      }
    }).then(function(data) {
      console.log(data);
    }).catch(function(err) {
      console.log(err);
    });


    fetch("/students.json")
    .then(
        function(response){
            if(response.status!==200){
                console.log("存在一个问题,状态码为:"+response.status);
                return;
            }
            //检查响应文本
            response.json().then(function(data){
                console.log(data);
            });
        }
    )
    .catch(function(err){
        console.log("Fetch错误:"+err);
    });



    1. class AwesomeProject extends Component {// 初始化模拟数据  
    2.   
    3.   
    4.     constructor(props) {  
    5.         super(props);  
    6.   
    7.         const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => {r1 !== r2}});  
    8.         this.state = {  
    9.             dataSource: ds,  
    10.             load:false,  
    11.             text:''  
    12.         };  
    13.     }  
    14.   
    15.     //耗时操作放在这里面  
    16.     componentDidMount(){  
    17.         this.getNet();  
    18.     }  
    19.   
    20.     getNet(){  
    21.         fetch('http://gank.io/api/search/query/listview/category/福利/count/10/page/1')//请求地址  
    22.             .then((response) => response.json())//取数据  
    23.             .then((responseText) => {//处理数据  
    24.                 //通过setState()方法重新渲染界面  
    25.                 this.setState({  
    26.                     //改变加载ListView  
    27.                     load: true,  
    28.                     //设置数据源刷新界面  
    29.                     dataSource: this.state.dataSource.cloneWithRows(responseText.results),  
    30.                 })  
    31.   
    32.             })  
    33.             .catch((error) => {  
    34.                 console.warn(error);  
    35.             }).done();  
    36.     }  
    37.   
    38.     render() {  
    39.         if(this.state.load){  
    40.             return (  
    41.                 <View style={{flex: 1, paddingTop: 22}}>  
    42.                     <ListView  
    43.                         dataSource={this.state.dataSource}  
    44.                         renderRow={(rowData)=>  
    45.                             <View>  
    46.                                 <Image  
    47.                                     style={{  400, height: 250, marginTop: 5 }}  
    48.                                     source={{uri:rowData.url}}/>  
    49.                             </View>}  
    50.                         />  
    51.                 </View>  
    52.             );  
    53.         } else{  
    54.             return(  
    55.                 <View>  
    56.                     <Text>loading......</Text>  
    57.                 </View>  
    58.             );  
    59.         }  
    60.     }  
    61. }  

    项目:

    export default class View extends Component {
    state = {
    total: {},
    }

    componentDidMount() {
    fetch('')
    .then((response) => {
    return response.json();
    })
    .then((data) => {
    this.setState({total: data.data});
    });
    }

    render() {
    const {total: {usersCount, msgsCount}} = this.state;
    return (
    <div className="user-summary">
    <div className="summary-top">
    <h1>微信公众号汇总</h1>
    <ul>
    <li>总关注人数:<span>{usersCount}</span></li>
    <li>总消息数:<span>{msgsCount}</span></li>
    </ul>
    </div>
    </div>
    );
    }
    }

     
     

     

  • 相关阅读:
    @property @synthesize的含义以及误区。
    OC中类的扩展介绍
    Thinking in Java第三、四章学习笔记----操作符与控制执行流程
    LeetCode之Easy篇 ——(12)Integer to Roman
    LeetCode之Easy篇 ——(9)Palindrome Number
    LeetCode之Easy篇 ——(7)Reverse Integer
    LeetCode之Easy篇 ——(1)Two Sum
    Java关键字汇总
    Thinking in Java 第二章学习笔记----一切都是对象
    php文件上传原理详解
  • 原文地址:https://www.cnblogs.com/liuna/p/6560595.html
Copyright © 2020-2023  润新知