React学习系列(六)：react项目 请求接口文档mock的数据

1.接口文档配置数据类型

比如yapi接口文档，打开一个接口，点击编辑，配置返回数据模板。

语法参照mockjs，参考链接：mockjs.com/examples.ht…

2.react项目中配置

1.修改env.dev, yapi接口mock地址(跳过这步，不需要)

VITE_REQUEST_REDIRECT_BUILD=http://XXXXXX/mock/19

2.修改代理，vite.config.ts

{
      server: {
        proxy: {
          '/asd': {
            target: 'http://XXXXXXX/mock/19',
            headers: {
              Connection: 'keep-alive'
            },
            secure: false,
            changeOrigin: true,
            rewrite: (pre: string) => pre.replace(new RegExp('^\\' + '/asd'), '')
          }
        }
      }
    }

3.修改接口文件

接口路径前加/asd映射，/asd/api//list

//api.js
export const getListApi = async (data) =>
  await http.get<TaskList>('/asd/api/pms/list', data, {
    headers: { showFullLoading: true },
    prefix: ''
  })
  
  // request.js 请求拦截器
  // 检查请求信息
        config.url = (config.headers.prefix ?? config.prefix) + config.url