UmiMax学习笔记

#### 安装：pnpm dlx create-umi@latest 

/**
 * access: 权限
 * 1. 在app.ts中配置全局初始化函数getInitialState
 * 2. 在根目录下的access.ts中配置自定义要暴露的权限种类
 * 3. 在routes中可直接使用access.ts中暴露的权限key(字符串形式)
 * 4. 在组件中使用const access = useAccess() 可拿到暴露的所有权限种类
 * 5. 搭配layout使用：当routes配置了access, 并且access值和app.tsx中的layout配置key相同时
 * 权限不满足则返回对应的页面内容
 * 如：app.tsx中
 *  export const layout = () => { 
        isAdmin: <div>您不是admin 暂时无权访问！</div> // 匹配routes中带有access并且access: 'isAdmin'
      };
    };
 * 
 *
 * Model: 数据流
 * 1. 直接在根目录下的models中添加文件xxx.ts
 * 获取：const {导出的变量} = useModel('xxx')
 * 
 * 2. 在pages下创建文件夹 aaa/models/bbb.ts
 * 获取：const {导出的变量} = useModel('aaa.bbb')
 * 
 * 3. 获取初始化initialState(在app.ts中通过getInitialState返回的数据)
 * const initialState = useModel('@@initialState')
 * 
 * 
 * 请求
 * 1. app.ts中配置export const request: RequestConfig = MyRequest
 * 2. utils下创建request.ts并导出MyRequest
 * import type { RequestConfig } from 'umi';

    const MyRequest: RequestConfig = {
      timeout: 1000,
      headers: {
        'Content-Type': 'application/json;charset:utf-8;'
      },
      // other axios options you want
      errorConfig: {
        errorHandler(error: any, opts) {
          switch (error?.code) {
            default:
              '请求错误'
          }
          return Promise.reject(error)
        },
        errorThrower() {
        }
      },
      requestInterceptors: [
        (url, options) => {
          const headers = options?.headers || {}
          // do something
          return {
            url,
            options: {
              ...options,
              headers: {
                ...headers,
                token: 'aaa'
              }
            }
          }
        },
      ],
      responseInterceptors: [
        (response) => { 
          // do something
          return response
        },
      ]
    };

    export default MyRequest
 * 
 * 3. src下创建services文件夹并创建user.ts，写入接口api
 *  import { request } from "@umijs/max"
    export const userList = (params?: {}) => {
      return request('/api/v1/queryUserList', {
        method: 'GET',
        ...params
      })
    }
 * 
 * 
 * 4. 使用useRequest
 * import { useRequest } from 'umi';
 * !!!hook形式调用，不能写在函数中调用，会报错
 *  const { data, error, loading, run }= useRequest(getUser, {
    manual: true, // 禁止自动调用
    loadingDelay: 200, // 延迟loading出现时间
   // refreshDeps: [name], // 必须 !! manual: false
  })

 // 在需要接口请求的地方调用run()
 */