封装是为了自己更好的玩耍,给大家参考一下,可根据自己的需求增加属性或方法~
第一步。封装自己的请求类【文件名:SelfFetch.js】
yarn add isomorphic-unfetch 或者 npm i isomorphic-unfetch --save
import fetch from "isomorphic-unfetch";
class SelfFetch {
// 让每个promise请求都trycatch
async 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}`);
}