逻辑网络设计报告,it设备网站如何做seo,小程序免费制作平台官网,单机传奇手游无需联网方法有很多种#xff0c;这里贴一个比较优雅又简单易懂的。用class类写法#xff0c;new一个实例方法。其中qs是包#xff0c;类似于url拼接的方法#xff0c;自行npm安装。我这里fetch使用的是dva的fetch#xff0c;也可以自行使用自带的fetch #xff0c;把const fetc…方法有很多种这里贴一个比较优雅又简单易懂的。用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以及datacode: -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是其他类型的话默认为如下↓要求参数传递样式为 key1value1key2value2但实际场景以json为多// content-type: application/x-www-form-urlencoded,},};if (options.method POST || PUT) {defaultOptions.headers[Content-Type] application/json; charsetutf-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封装请求的方法-简单易懂的全部内容。