Author:Mr. 柳上原
付出不亚于任何的努力
愿我们所有的努力, 都不会被生活辜负
不忘初心, 方得始终
react 里, 请务必自己封装请求方法
好处: 1. 自定义封装请求方法, 能够更好的处理请求结构, 做好请求体 body 的处理等
2. 可以使用多种异步数据请求方法, 如 Promise.then().catch(),async 》 await,try,catch 等
3. 请求方法的复用性 (这才是 react 的精髓)
4. 颗粒化思想,
5. 可以简化具体页面的后端请求结构, 细致拆分组件, 精准定位 bug
- // 接口封装方法
- // 接口验证的公用判断方法
- export async function callApi(call) {
- try {
- let response = await call();
- response = (response || {}).data || {};
- return response;
- } catch (e) {
- return { code: "500", message: e.message }
- }
- }
- // 接口封装
- const ApiClient = {
- get(url, useToken = true, qs) {
- const headers = new Headers();
- headers.append('Accept', 'application/json');
- if (useToken) {
- const token = store.getState().oidc.user.access_token;
- headers.append('Authorization', `Bearer ${token}`);
- }
- const options = {
- method: 'GET',
- headers,
- mode: 'cors'
- };
- const params = new URLSearchParams();
- if (qs) {
- Object.keys(qs).forEach(key => params.append(key, qs[key]));
- url = url + "?" + params.toString();
- }
- return fetch(url, options)
- .then((res) => res.JSON())
- .then((data) => ({ data }))
- .catch((error) => ({ error }));
- },
- getWithnoToken(url, header, qs) {
- const headers = new Headers();
- headers.append('Accept', 'application/json');
- if (header) {
- // headers.append('Authorization', `Bearer ${token}`);
- // console.log("userToken:", `Bearer ${token}`);
- Object.keys(header).forEach(key => headers.append(key, header[key]))
- }
- const options = {
- method: 'GET',
- headers,
- mode: 'cors'
- };
- const params = new URLSearchParams();
- if (qs) {
- Object.keys(qs).forEach(key => params.append(key, qs[key]));
- url = url + "?" + params.toString();
- }
- return fetch(url, options)
- .then((res) => res.JSON())
- .then((data) => ({ data }))
- .catch((error) => ({ error }));
- },
- post(url, body, qs, method = 'POST') {
- const token = store.getState().oidc.user.access_token;
- const headers = new Headers();
- headers.append('Content-Type', 'application/json');
- headers.append('Accept', 'application/json');
- headers.append('Authorization', `Bearer ${token}`);
- var postData = undefined;
- if (body) {
- postData = JSON.stringify(body);
- }
- const options = {
- method: method,
- headers,
- mode: 'cors',
- body: postData
- };
- const params = new URLSearchParams();
- if (qs) {
- Object.keys(qs).forEach(key => params.append(key, qs[key]));
- url = url + "?" + params.toString();
- }
- return fetch(url, options)
- .then((res) => res.JSON())
- .then((data) => ({ data }))
- .catch((error) => ({ error }));
- },
- postForm(url, body, qs, method = 'POST', headerSetter) {
- const headers = new Headers();
- headers.append('Accept', 'application/json');
- if (headerSetter) {
- headerSetter(headers);
- }
- const params = new URLSearchParams();
- if (qs) {
- Object.keys(qs).forEach(key => params.append(key, qs[key]));
- url = url + "?" + params.toString();
- }
- // headers.append('Authorization', `Bearer ${token}`);
- const options = {
- method: method,
- headers,
- mode: 'cors'
- };
- var fd = new FormData();
- if (body) {
- for (var k in body) {
- if (body.hasOwnProperty(k)) {
- fd.append(k, body[k]);
- }
- }
- options.body = fd;
- }
- return fetch(url, options)
- .then((res) => res.JSON())
- .then((data) => ({ data }));
- },
- postFormUrlEncode(url, body, qs, method = 'POST', headerSetter) {
- const headers = new Headers();
- headers.append('Content-Type', 'application/x-www-form-urlencoded');
- headers.append('Accept', 'application/json');
- if (headerSetter) {
- headerSetter(headers);
- }
- const params = new URLSearchParams();
- if (qs) {
- Object.keys(qs).forEach(key => params.append(key, qs[key]));
- url = url + "?" + params.toString();
- }
- const options = {
- method: method,
- headers,
- mode: 'cors'
- };
- if (body) {
- const bodyParams = new URLSearchParams();
- Object.keys(body).forEach(key => bodyParams.append(key, body[key]));
- options.body = bodyParams.toString();
- }
- return fetch(url, options)
- .then((res) => res.JSON())
- .then((data) => ({ data }));
- },
- put(url, body, qs, method = 'PUT') {
- const token = store.getState().oidc.user.access_token;
- const headers = new Headers();
- headers.append('Content-Type', 'application/json');
- headers.append('Accept', 'application/json');
- headers.append('Authorization', `Bearer ${token}`);
- var postData = undefined;
- if (body) {
- postData = JSON.stringify(body);
- }
- const options = {
- method: method,
- headers,
- mode: 'cors',
- body: postData
- };
- const params = new URLSearchParams();
- if (qs) {
- Object.keys(qs).forEach(key => params.append(key, qs[key]));
- url = url + "?" + params.toString();
- }
- return fetch(url, options)
- .then((res) => res.JSON())
- .then((data) => ({ data }))
- .catch((error) => ({ error }));
- },
- del(url, body, qs, method = 'DELETE') {
- const token = store.getState().oidc.user.access_token;
- const headers = new Headers();
- headers.append('Content-Type', 'application/json');
- headers.append('Accept', 'application/json');
- headers.append('Authorization', `Bearer ${token}`);
- var postData = undefined;
- if (body) {
- postData = JSON.stringify(body);
- }
- const options = {
- method: method,
- headers,
- mode: 'cors',
- body: postData
- };
- const params = new URLSearchParams();
- if (qs) {
- Object.keys(qs).forEach(key => params.append(key, qs[key]));
- url = url + "?" + params.toString();
- }
- return fetch(url, options)
- .then((res) => res.JSON())
- .then((data) => ({ data }))
- .catch((error) => ({ error }));
- }
- }
- export default ApiClient;
来源: http://www.jianshu.com/p/cf102fe281ac