React Native 从零单排7 网络请求

RN版本：0.64
系统：Win10

前言

记录一下React Native 如何进行网络请求,Fetch和WebSocket的基础使用可以直接到React Native官网或者React Natiive中文网查看文档。

Axios基础用法

这里分享下Axios的用法，Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。

1. 安装Axios库

 npm: npm install axios
 yarn: yarn add axios

2. 新建request.js文件:

import axios from 'axios';

export const MethodType = {
  GET: 'GET',
  POST: 'POST',
  PUT: 'PUT',
  DELETE: 'DELETE',
  PATCH: 'PATCH',
};

export const request = async (
  api,
  method = MethodType.GET,
  params = {},
) => {
  // 如果是get方法，则使用params参数，否则使用data
  const data = method === 'GET' ? 'params' : 'data';
  let headers = {
    'X-Requested-With': 'XMLHttpRequest',
    'Content-Type': 'application/json',
  };
  return new Promise((resolve, reject) => {
    axios({
      url: api,
      method,
      // 这块要为了区分后台get和post的参数名
      [data]: params,
      headers,
    })
      .then((responseData) => {
        resolve(responseData);
      })
      .catch((error) => {
        reject(error)
      });
  });
};

3. 调用:

import {request} from './requset';
const apiPrefix = 'http://yourdomain/api/v1';
export default {
    addResource(data) {
    return request(`${apiPrefix}/resources/add-resource`, 'POST', data);
  },
  getResources {
    return request(`${apiPrefix}/resources/resources`, 'GET');
  },  
}

4. Axios拦截器
5. 在request.js中加入 以下代码，即可在axios请求前和接收到服务器响应时做相应的操作，比如Token验证或者统一的错误提示等

// request拦截器
axios.interceptors.request.use(
    config => {
        // Do something before request is sent
        // 举个例子，
        let token = await getToken();
        if (token) {
          config.headers.Authorization = `Bearer ${token}`;
        }
        return config
    },
    error => {
        // Do something with request error
        console.log(error)
        Promise.reject(error)
    }
)

// respone拦截器
axios.interceptors.response.use(
    response => {
        if (response.status !== 200) {
            console.log(response.data.errMsg)
        } else {
            return response.data
        }
    },
    error => 
        return Promise.reject(error)
    }
)