nextjs 基于 isomorphic-unfetch 封装自己的请求库

封装是为了自己更好的玩耍，给大家参考一下，可根据自己的需求增加属性或方法~

第一步。封装自己的请求类【文件名：SelfFetch.js】

yarn add isomorphic-unfetch 或者 npm i isomorphic-unfetch --save

import fetch from "isomorphic-unfetch";class SelfFetch {// 让每个promise请求都trycatchasync baseMethod(fn) {if (fn) {try {const res = await fn;const data = await res.json();if (data.code === 0) {return data.data;} else {return '';}} catch (error) {return null;}}}async get(url) {const token = window.localStorage.getItem('token') || ''return await this.baseMethod(fetch(url, {headers: {Authorization: `Bearer ${token}`, // 带上token的地方'Content-Type': 'application/json'},}));}async post(url, options) {const token = window.localStorage.getItem('token') || ''const res = await this.baseMethod(fetch(url, {headers: {Authorization: `Bearer ${token}`,'Content-Type': 'application/json'},method: "POST",body: JSON.stringify(options),}));return res;}async put(url, options) {const token = window.localStorage.getItem('token') || ''const res = await this.baseMethod(fetch(url, {headers: {Authorization: `Bearer ${token}`,'Content-Type': 'application/json'},method: "Put",body: JSON.stringify(options),}));return res;}
}export default SelfFetch;

第二步。封装自己的请求方法【文件名：service.js】

import SelfFetch from './SelfFetch';
const selfFetch = new SelfFetch();
const BaseUrl = '127.0.0.1:3000'export async function getTopicsApi(options) {return await selfFetch.get(`${BaseUrl}/api/v1/topics?page=${options.page || 1}&size=${options.size || 10}`);
}export async function loginApi(options) {return await selfFetch.post(`${BaseUrl}/api/login`, options);
}export async function getUserInfoApi() {return await selfFetch.get(`${BaseUrl}/api/getUserInfo`);
}export async function putQrcodeApi(qrcode) {return await selfFetch.put(`${BaseUrl}/api/v1/topics/${qrcode}`);
}

nextjs 基于 isomorphic-unfetch 封装自己的请求库相关推荐

layui table reload post请求_基于Layui组件封装的后台模版
HG框架简介 HG-Layui-UI框架,是基于layui最新版UI搭建的一套通用后台管理框架,借鉴了市面上各大主流框架风格,采用iframe标签页实现,保留了传统开发模式的简单实用性. 为快速开发减 ...
基于AFNetworking的封装的工具类
基于AFNetworking的封装的工具类MXERequestService // // MXERequestService.h // testAFNetWorking // // Created b ...
axios 跨域_当遇到跨域开发时，我们如何处理好前后端配置和请求库封装
我们知道很多大型项目都或多或少的采用跨域的模式开发, 以达到服务和资源的解耦和高效利用. 在大前端盛行的今天更为如此, 前端工程师可以通过nodejs或者Nginx轻松搭建起web服务器.这个时候我们 ...
CORS 请求未能成功_当遇到跨域开发时, 我们如何处理好前后端配置和请求库封装(koa/axios版)...
我们知道很多大型项目都或多或少的采用跨域的模式开发, 以达到服务和资源的解耦和高效利用. 在大前端盛行的今天更为如此, 前端工程师可以通过nodejs或者Nginx轻松搭建起web服务器.这个时候我们 ...
uni app 调用网络打印机_uni-app封装一个request请求
在上一篇文章里面,写到使用uni.request请求的方法https://www.jianshu.com/p/bc62c9e1beed getList() { uni.request({url: &q ...
mui封装的ajax请求
由于项目中引进MUI框架,所以就不需要引进jquery,但需要和后台交互时,常写为jquery格式:所以笔者觉得有必要将mui封装的ajax请求在这里提一下: 1,mui框架基于htm5plus的XM ...
封装uniapp网络请求, 统一管理接口和怎么使用(完整版)
在项目开发的过程中,请求网络接口获取数据是我们前端开发人员经常需要做的工作,我们知道接口会有很多很多,我们不可能在每一个页面中发起每一个请求的时候都重复的去写那些一样的网络请求代码,那样不仅看起来很冗 ...
ajax请求封装,封装的ajax请求
在做登录注册这类提交表单数据时,我们经常需要局部刷新网页来验证用户输入的信息,这就需要用到ajax请求,我们通常需要获取表单中的数据,发起ajax请求,通过服务程序,与数据库的数据进行比对,判断信息的 ...
小程序promise封装post请求_微信小程序promise封装get/post请求
微信小程序promise封装get/post请求 2020-07-04 20:42:49 微信小程序promise封装get/post请求叶子兔 2018-10-10 08:55:30 1056 ...

nextjs 基于 isomorphic-unfetch 封装自己的请求库

第一步。封装自己的请求类【文件名：SelfFetch.js】

第二步。封装自己的请求方法【文件名：service.js】

nextjs 基于 isomorphic-unfetch 封装自己的请求库相关推荐

最新文章

热门文章