Ice编写组件&样式方案&数据请求&状态管理《五》

---

如何全局覆盖基础组件（next/antd）样式？

暂未发现这个有啥影响

数据请求：

====================================================================

globalServices.tsx文件，项目demo：

import { request } from ‘ice’;

export default {

async getUserTree() {

return await request({

url: ‘url’,

method: ‘GET’,

})

},

async queryRoleMenuById(roleId: any) {

return await request(url${roleId})

}

}

官网推荐常用使用方式：

request(RequestConfig);

request.get(‘/user’, RequestConfig);

request.post(‘/user’, data, RequestConfig);

{

// url is the server URL that will be used for the request

url: ‘/user’,

// method is the request method to be used when making the request

method: ‘get’, // default

// headers are custom headers to be sent

headers: {‘X-Requested-With’: ‘XMLHttpRequest’},

// params are the URL parameters to be sent with the request

// Must be a plain object or a URLSearchParams object

params: {

ID: 12345

},

// data is the data to be sent as the request body

// Only applicable for request methods ‘PUT’, ‘POST’, and ‘PATCH’

data: {

firstName: ‘Fred’

},

// timeout specifies the number of milliseconds before the request times out.

// If the request takes longer than timeout, the request will be aborted.

timeout: 1000, // default is 0 (no timeout)

// withCredentials indicates whether or not cross-site Access-Control requests

// should be made using credentials

withCredentials: false, // default

// responseType indicates the type of data that the server will respond with

// options are: ‘arraybuffer’, ‘document’, ‘json’, ‘text’, ‘stream’

responseType: ‘json’, // default

// should be made return full response

withFullResponse: false,

// request instance name

instanceName: ‘request2’

}

useRequest#

用在函数式组件中，使用 useRequest 可以极大的简化对请求状态的管理。

-----------暂时不知道咋用滴，是ahooks里的东西，官网demo：

// 用法 1：传入字符串

const { data, error, loading } = useRequest(‘/api/repo’);

// 用法 2：传入配置对象

const { data, error, loading } = useRequest({

url: ‘/api/repo’,

method: ‘get’,

});

// 用法 3：传入 service 函数

const { data, error, loading, request } = useRequest((id) => ({

url: ‘/api/repo’,

method: ‘get’,

data: { id },

});

请求配置：

在实际项目中通常需要对请求进行全局统一的封装，例如配置请求的 baseURL、统一 header、拦截请求和响应等等，这时只需要在应用的的 appConfig 中进行配置即可。

状态管理

===================================================================

icejs 内置了状态管理方案，并在此基础上进一步遵循 “约定优于配置” 原则，进行抽象和封装，使得状态管理变得非常容易。

全局应用状态#

定义 Model#

最后

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

前端视频资料：
l#

最后

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

[外链图片转存中…(img-zQuPEYew-1718172181012)]

前端视频资料：