RN Axios实现网络请求

前言

此文将介绍如何使用在RN中使用axios进行网络请求，通过阅读官方文档，了解到fetch可以用作网络请求的框架，去了解了下，发现还不错，也是在这篇文档后面发现，吖，还支持使用axios，哇，很是开心，使用过axios发现不错啊，美滋滋啊，所以也是记录下在RN使用axios咯。

封装与使用

安装依赖

  yarn add axios

axios使用详解
封装

import axios from 'axios'
import {Alert} from 'react-native'
const instance = axios.create();

instance.defaults.timeout = 2500;

//请求拦截器
instance.interceptors.request.use(
    function(config) {
        // 添加响应头等等设置
        // config.headers.userToken = 'this is my token'
        return config
    },
    function(error) {
        return Promise.reject(error) // 请求出错
    }
);

//返回拦截器
instance.interceptors.response.use(
    function(response) {
        // if (response.data.data.result === 404) {
        //  let { retMsg } = response.data.data
        //  // 服务端出现了一些问题的情况下
        //  Alert.alert('温馨提示', retMsg)
        //  // 等等按钮事件
        //  return Promise.reject(retMsg)
        // } else {
        //  // 服务端一切正常 返回data数据
        // }
        return response.data
    },
    function(error) {
        return Promise.reject(error)
    }
);



export function GET(url,params,payload) {
    return instance.get(url, {
        params: params,
        data: payload
    });
}

export function Post(url, par) {
    return instance.post(url, par);
}

export function Del(url, payload) {
    return instance.delete(url, {
        data: payload
    });
}

export function Put(url, par, payload) {
    return instance.put(url, par, {
        data: payload
    })
}

使用

apis.GET('https://api.apiopen.top/searchAuthors',{'name':'李白'},null)
                .then( res => {
                  console.log(res);
                })
                .catch(err => {
                  console.log(err.toString());
                });

小结

axios还是挺好使的啊，好了，网络请求也ok了，下面进行下一步。

杂谈 -- 记一次点击事件操作

 render(): React.ReactNode {
     const data = this.props.data || '传递数据';
     const fetInfo = () => {
            console.log('进行网络请求');
     };
     return (
            <View>
                                    ....
                <Button title={'进行网络请求'} onPress={fetInfo}/>
            </View>
        );
    }

上面的案例记录了，如何在外部定义事件，并在内部进行调用，目前还没有系统的学习ui，后面就要去学习咯。