慈云数据的服务器机柜（云服务器机房）

慈云数据提供了多种类型的服务器机柜，包括:1U机柜、2U机柜、4U机柜、6U机柜、9U机柜、12U机柜、18U机柜、22U机柜、27U机柜等。每种机柜的尺寸不同，可以满足不同客户的不同需求，能够有效提高服务器的使用效率和安全性。

</span>

</div>

<div class="col-sm-10">

<div class="form-group">

<select name="serverRoom" class="form-control">

<option value="1">A</option>

<option value="2">B</option>

<option value="3">C</option>

</select>

</div>

</div>

</div>

</form>

当你做什么需要当前表单里的name="serverRoom"的值 就用以下代码

$('[name="serverRoom"]').val();

* @param {Object} data

*/

export const cloudServiceRoom = (data) => {

return service({

url: '/',

method: 'post',

data

});

}

src/pages/cloud/index.js

import React from 'react';

import { cloudServiceRoom } from './../../apis/index';

class Cloud extends React.Component {

constructor(props) {

super(props);

this.state = {

data: []

};

}

componentDidMount() {

cloudServiceRoom({

code: 'CloudServiceRoom',

data: {},

}).then(res => {

const { data } = res.data;

this.setState({

data: data

});

});

}

render() {

return (

<div>

<h1>云服务机房</h1>

<p>{JSON.stringify(this.state.data)}</p>

</div>

)

}

}

export default Cloud;

这里我们只完成了一半，把云服务机房的api请求封装成了一个方法，但是我们怎么获取返回结果呢？这里我们就要用到axios中的then方法，如果了解promise的话，就知道then接收的是一个函数，then函数会在请求之后调用，所以可以在使用该方法的时候，then中拿到返回的数据，然后就可以用setState的方法设置数据到state中，从而实现了请求数据，渲染到页面的效果。

这就是我们封装axios的全部流程，axios封装之后，不仅仅可以在页面中发送请求，还可以在其它模块中使用，大大减少了代码量，也提高了代