React request.js function Encapsulation

1.request.js function Encapsulation

Import {Toast} from ' Antd-mobile ', import Axios from ' Axios ', import store from '. /store '; import {push} from ' React-router-redux ', import qs from ' QS ';//request Path Const BASEURL = ' https://www.baidu.com/'; Host and port//axios default configuration Request API Base Address Axios.defaults.baseURL = baseurl;//axios.defaults.headers.post[' content-type '] = ' Application/x-www-form-urlencoded '; Post content Type//axios.defaults.headers.get[' content-type '] = ' application/json;charset=utf-8 '; Get content Type//axios.defaults.headers.post[' content-type '] = ' multipart/form-data '; Post Content type FormData type axios.defaults.timeout = 30000; Timeout setting, time-out entered error callback, related operation Axios.defaults.withCredentials = false; Whether to support cross-domain cookieconst codemessage = {200: ' The server successfully returned the requested data ', 201: ' New or modified data succeeded. ', 202: ' A request has entered the background queue (asynchronous Task) ', 204: ' Delete data successfully. ', 400: ' The request was made with an error, the server did not make new or modified data, the operation. ', 401: ' The user does not have permission (token, user name, password error). ', 403: ' Users are authorized, but access is forbidden. ', 404: ' The request was made against a nonexistent record, the server did not operate ', ' 406: ' The requested format is not available. ', 410: ' The requested resource is permanently deleted and will not be available again. ', 422: ' When an object is created, a validation error occurs. ', 500: ' Server error, please check server ', 502: ' Gateway error ', 503: ' Service Unavailable, server temporarily overloaded or maintained ', 504: ' Gateway timed out ',};function checkstatus (response) {if (Response.Status >= $ &am  p;& Response.Status <) {return response; } Const ERRORTEXT = Codemessage[response.status] | |  Response.statustext;  Prompt box Toast.info (' Request error ${response.status}: ${response.url} ', 1) const ERROR = new error (ERRORTEXT);  Error.name = Response.Status;  Error.response = response; Throw error;} /** * Requests a URL, returning a promise. * * @param {string} URL the URL of we want to request * @param {object} [options] The options we want to pass to "FET Ch "* @return {Object} An object containing either" data "or" ERR "*/export default function request (URL, option  s) {Const Defaultoptions = {credentials: ' include ',};  Const Newoptions = {... defaultoptions, ... options};    if (Newoptions.method = = = ' POST ' | |    Newoptions.method = = = ' PUT ' | | Newoptions.method = = = ' DELETE ') {if (! (     Newoptions.body instanceof FormData)) { Newoptions.headers = {Accept: ' Application/json ', ' content-type ': ' application/x-www-form-urlencoded ',      ... newoptions.headers,};      Newoptions.data = Qs.stringify (newoptions.body);    Newoptions.body = Json.stringify (newoptions.body); } else {//newoptions.body is FormData newoptions.headers = {Accept: ' Application/json ', ... Newo    Ptions.headers,}; }} return Axios (URL, newoptions). Then (CheckStatus) and then (response) = {//successful callback if (newoptions.me Thod = = = ' DELETE ' | |      Response.Status = = = 204) {return response.text ();    } return response.data;      }). catch ((e) = = {//Failed callback Const {Dispatch} = store;      Const STATUS = E.name;        if (status = = = 401) {Dispatch ({type: ' Login/logout ',});      Return        } if (status = = = 403) {Dispatch (push ('/exception/403 '));      Return } if (Status <= 504 && status>=) {Dispatch (push ('/exception/500 '));      Return      } if (Status >= 404 && Status < 422) {Dispatch (push ('/exception/404 ')); }    });}

2. Note: Methods for passing arrays to the background

It is necessary to set its indices to false in the Qs method, such as:

Qs.stringify ({a: [' B ', ' C ', ' d ']}, {indices:false});

.

React request.js function Encapsulation