react封装函数_react中请求接口的封装

1. 新建一个dva项目。使用antd 或者antd-mobile组件库。

$ npm install dva-cli -g

$ dva -v

$ dva new dva-quickstart

$ npm start

$ npm install antd babel-plugin-import --save

或者是

$ npm install antd-mobile babel-plugin-import --save

导入方式css

{

"entry": "src/index.js",

"env": {

"development": {

"extraBabelPlugins": [

"dva-hmr",

"transform-runtime",

["import", { "libraryName": "antd-mobile", "style": "css" }]

]

},

"production": {

"extraBabelPlugins": [

"transform-runtime",

["import", { "libraryName": "antd-mobile", "style": "css" }]

]

}

}

}

2. 在该项目的src中utils 创建名为request文件夹。

$ cd dva-quickstart

$ cd src

$ cd utils

新建文件夹名为request，然后在request文件夹下面创建名为helpers的文件夹以及index.js 和 README.md , request.js 如图所示：

在helpers 下建三个js文件 combineURL.js , isAbsoluteURL.js , serialize.js

image.png

combineURL.js中 ：

// Creates a new URL by combining the specified URLs

const combineURL = (baseUrl, path) => {

return `${baseUrl.replace(/\/+$/, '')}/${path.replace(/^\/+/, '')}`;

};

export default combineURL;

isAbsoluteURL.js中 ：

// A URL is considered absolute if it begins with "://" or "//" (protocol-relative URL).

// RFC 3986 defines scheme name as a sequence of characters beginning with a letter and followed

// by any combination of letters, digits, plus, period, or hyphen.

// https://www.ietf.org/rfc/rfc3986.txt

const isAbsoluteURL = (url) => /^([a-z][a-z\d\+\-\.]*:)?\/\//i.test(url);

export default isAbsoluteURL;

serialize.js中 ：

import { isPresent } from 'lib/lang';

const encode = (value) => {

return encodeURIComponent(value)

.replace(/%40/gi, '@')

.replace(/%3A/gi, ':')

.replace(/%24/g, '$')

.replace(/%2C/gi, ',')

.replace(/%20/g, '+')

.replace(/%5B/gi, '[')

.replace(/%5D/gi, ']');

};

// Encode a set of form elements as a string for submission.

const serialize = (params) => {

const ret = [];

Object.keys(params).forEach(key => {

const value = params[key];

if (isPresent(value)) {

ret.push(`${encode(key)}=${encode(value)}`);

}

});

return ret.join('&');

};

export default serialize;

3. 在utils下创建一个与request同级的lang.js

lang.js 如下:

export const is