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
  1. 新建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)
      });
  });
};
  1. 調用:
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');
  },  
}

  1. Axios攔截器
  2. 在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)
    }
)
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容