react使用fetch封裝請求的方法-簡單易懂

方法有不少種，這裏貼一個比較優雅又簡單易懂的。用class類寫法，new一個實例方法。

其中qs是包，相似於url拼接的方法，自行npm安裝。我這裏fetch使用的是dva的fetch，也能夠自行使用自帶的fetch  ，

把const fetch = require('dva').fetch; 註釋既可。

/**
 * 請求方法
 */
import qs from 'qs';
import { message } from 'antd';


const fetch = require('dva').fetch;
const { stringify, parse } = qs;

const checkStatus = res => {
 if (200 >= res.status < 300) {
 return res;
 }
 message.error(`網絡請求失敗,${res.status}`);
 const error = new Error(res.statusText);
 error.response = response;
 throw error;
};

/**
 * 捕獲成功登陸過時狀態碼等
 * @param res
 * @returns {*}
 */
const judgeOkState = async res => {
 const cloneRes = await res.clone().json();
 //TODO:能夠在這裏管控全局請求
 if (cloneRes.code !== 200) {
 message.error(`${cloneRes.msg}${cloneRes.code}`);
 }
 return res;
};

/**
 * 捕獲失敗
 * @param error
 */
const handleError = error => {
 if (error instanceof TypeError) {
 message.error(`網絡請求失敗啦！${error}`);
 }
 return { //防止頁面崩潰，由於每一個接口都有判斷res.code以及data
 code: -1,
 data: false,
 };
};

class http {
 /**
 *靜態的fetch請求通用方法
 * @param url
 * @param options
 * @returns {Promise<unknown>}
 */
 static async staticFetch(url = '', options = {}) {

 const defaultOptions = {
 /*容許攜帶cookies*/
 credentials: 'include',
 /*容許跨域**/
 mode: 'cors',
 headers: {
 token: null,
 Authorization: null,
 // 當請求方法是POST，若是不指定content-type是其餘類型的話，默認爲以下↓，要求參數傳遞樣式爲 key1=value1&key2=value2，但實際場景以json爲多
 // 'content-type': 'application/x-www-form-urlencoded',
 },
 };
 if (options.method === 'POST' || 'PUT') {
 defaultOptions.headers['Content-Type'] = 'application/json; charset=utf-8';
 }
 const newOptions = { ...defaultOptions, ...options };
 console.log('newOptions', newOptions);
 return fetch(url, newOptions)
 .then(checkStatus)
 .then(judgeOkState)
 .then(res => res.json())
 .catch(handleError);
 }

 /**
 *post請求方式
 * @param url
 * @returns {Promise<unknown>}
 */
 post(url, params = {}, option = {}) {
 const options = Object.assign({ method: 'POST' }, option);
 //通常咱們經常使用場景用的是json，因此須要在headers加Content-Type類型
 options.body = JSON.stringify(params);

 //能夠是上傳鍵值對形式，也能夠是文件，使用append創造鍵值對數據
 if (options.type === 'FormData' && options.body !== 'undefined') {
 let params = new FormData();
 for (let key of Object.keys(options.body)) {
 params.append(key, options.body[key]);
 }
 options.body = params;
 }
 return http.staticFetch(url, options); //類的靜態方法只能經過類自己調用
 }

 /**
 * put方法
 * @param url
 * @returns {Promise<unknown>}
 */
 put(url, params = {}, option = {}) {
 const options = Object.assign({ method: 'PUT' }, option);
 options.body = JSON.stringify(params);
 return http.staticFetch(url, options); //類的靜態方法只能經過類自己調用
 }

 /**
 * get請求方式
 * @param url
 * @param option
 */
 get(url, option = {}) {
 const options = Object.assign({ method: 'GET' }, option);
 return http.staticFetch(url, options);
 }
}

const requestFun = new http(); //new生成實例
export const { post, get, put } = requestFun;
export default requestFun;

 

如何調用

import requestFun from '../utils/fetchUtil';
import qs from 'qs';

const { stringify } = qs;
const {post,get} = requestFun;

//get方式
export async function fetchData1(params) {
  return get(`/api/bbb?${stringify(params)}`);
}


//post方式
export async function fetchData2(params) {
  return post(`/api/aaa`,params);
}

　　

有問題能夠提出~~~，應該沒多大問題