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