当前位置:   article > 正文

react 封装API_react封装请求api接口

react封装请求api接口
  1. /**
  2. * 网络请求配置
  3. */
  4. import axios from "axios";
  5. axios.defaults.timeout = 100000;
  6. axios.defaults.baseURL = "http://127.0.0.1:8000/";
  7. /**
  8. * http request 拦截器
  9. */
  10. axios.interceptors.request.use(
  11. (config) => {
  12. config.data = JSON.stringify(config.data);
  13. config.headers = {
  14. "Content-Type": "application/json",
  15. };
  16. return config;
  17. },
  18. (error) => {
  19. return Promise.reject(error);
  20. }
  21. );
  22. /**
  23. * http response 拦截器
  24. */
  25. axios.interceptors.response.use(
  26. (response) => {
  27. if (response.data.errCode === 2) {
  28. console.log("过期");
  29. }
  30. return response;
  31. },
  32. (error) => {
  33. console.log("请求出错:", error);
  34. }
  35. );
  36. /**
  37. * 封装get方法
  38. * @param url 请求url
  39. * @param params 请求参数
  40. * @returns {Promise}
  41. */
  42. export function get(url, params = {}) {
  43. return new Promise((resolve, reject) => {
  44. axios.get(url, {
  45. params: params,
  46. }).then((response) => {
  47. landing(url, params, response.data);
  48. resolve(response.data);
  49. })
  50. .catch((error) => {
  51. reject(error);
  52. });
  53. });
  54. }
  55. /**
  56. * 封装post请求
  57. * @param url
  58. * @param data
  59. * @returns {Promise}
  60. */
  61. export function post(url, data) {
  62. return new Promise((resolve, reject) => {
  63. axios.post(url, data).then(
  64. (response) => {
  65. //关闭进度条
  66. resolve(response.data);
  67. },
  68. (err) => {
  69. reject(err);
  70. }
  71. );
  72. });
  73. }
  74. /**
  75. * 封装patch请求
  76. * @param url
  77. * @param data
  78. * @returns {Promise}
  79. */
  80. export function patch(url, data = {}) {
  81. return new Promise((resolve, reject) => {
  82. axios.patch(url, data).then(
  83. (response) => {
  84. resolve(response.data);
  85. },
  86. (err) => {
  87. msag(err);
  88. reject(err);
  89. }
  90. );
  91. });
  92. }
  93. /**
  94. * 封装put请求
  95. * @param url
  96. * @param data
  97. * @returns {Promise}
  98. */
  99. export function put(url, data = {}) {
  100. return new Promise((resolve, reject) => {
  101. axios.put(url, data).then(
  102. (response) => {
  103. resolve(response.data);
  104. },
  105. (err) => {
  106. msag(err);
  107. reject(err);
  108. }
  109. );
  110. });
  111. }
  112. //统一接口处理,返回数据
  113. export default function (fecth, url, param) {
  114. let _data = "";
  115. return new Promise((resolve, reject) => {
  116. switch (fecth) {
  117. case "get":
  118. console.log("begin a get request,and url:", url);
  119. get(url, param)
  120. .then(function (response) {
  121. resolve(response);
  122. })
  123. .catch(function (error) {
  124. console.log("get request GET failed.", error);
  125. reject(error);
  126. });
  127. break;
  128. case "post":
  129. post(url, param)
  130. .then(function (response) {
  131. resolve(response);
  132. })
  133. .catch(function (error) {
  134. console.log("get request POST failed.", error);
  135. reject(error);
  136. });
  137. break;
  138. default:
  139. break;
  140. }
  141. });
  142. }
  143. //失败提示
  144. function msag(err) {
  145. if (err && err.response) {
  146. switch (err.response.status) {
  147. case 400:
  148. alert(err.response.data.error.details);
  149. break;
  150. case 401:
  151. alert("未授权,请登录");
  152. break;
  153. case 403:
  154. alert("拒绝访问");
  155. break;
  156. case 404:
  157. alert("请求地址出错");
  158. break;
  159. case 408:
  160. alert("请求超时");
  161. break;
  162. case 500:
  163. alert("服务器内部错误");
  164. break;
  165. case 501:
  166. alert("服务未实现");
  167. break;
  168. case 502:
  169. alert("网关错误");
  170. break;
  171. case 503:
  172. alert("服务不可用");
  173. break;
  174. case 504:
  175. alert("网关超时");
  176. break;
  177. case 505:
  178. alert("HTTP版本不受支持");
  179. break;
  180. default:
  181. }
  182. }
  183. }
  184. /**
  185. * 查看返回的数据
  186. * @param url
  187. * @param params
  188. * @param data
  189. */
  190. function landing(url, params, data) {
  191. if (data.code === -1) {
  192. }
  193. }

js

  1. import http from './http';
  2. /**
  3. * 获取首页列表
  4. */
  5. function login(data) {
  6. return http("post", '/login/',data);
  7. }
  8. export {
  9. login
  10. }

 

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop】
推荐阅读
相关标签
  

闽ICP备14008679号