方法有很多種，這里貼一個比較優雅又簡單易懂的。用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}

*/

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}

*/

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}

*/

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

}

有問題可以提出~~~，應該沒多大問題

以上就是react使用fetch封裝請求的方法-簡單易懂的全部內容。

總結

以上是生活随笔為你收集整理的react 版权问题_react使用fetch封装请求的方法-简单易懂的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。