大佬， 放在model的token怎么在 $api中设置？ 我这里显示undefined.

[ado5]

请问有写 $api 的实例吗？ 不知道怎么封装比较好

[fwh1990]

Hello，您应该是碰到循环引用的问题，我的项目也经常碰到这种情况。可以这么解决：

import { HTTP_STATUS_CODE, HttpService } from '@redux-model/react';
import { message, notification } from 'antd';
+ import { TokenModel } from '../../models/passport/TokenModel';

interface ErrorResponse {
  code: string;
  message: string;
  error: string;
}

export const $api = new HttpService<ErrorResponse>({
  baseUrl: 'http://xxx.com',
  headers: () => {
+   // 防止死循环，使用require导入模块
+   const tokenModel = require('../../models/passport/TokenModel').tokenModel as TokenModel;

    return {
+     Authorization: `Bearer ${tokenModel.data.access_token}`,
      Accept: 'application/json',
      'Content-Type': 'application/json',
    };
  },
  onRespondError: (httpResponse, meta) => {
    const { data, status } = httpResponse;

    meta.businessCode = data ? data.code : undefined;

    if (status === HTTP_STATUS_CODE.unProcessableEntity) {
      meta.message = Object.values(data)[0][0] || '请求时传递的数据有误';
    } else {
      meta.message = (data && data.message) || '未能正常请求接口';
    }
  },
  onShowSuccess: (successText) => {
    message.success(successText);
  },
  onShowError: (errorText) => {
    const smallSize = 20;

    if (errorText.length > smallSize) {
      notification.error({
        message: '请求出错',
        description: errorText,
      });
    } else {
      message.error(errorText);
    }
  },
  timeoutMessage: () => '网络请求超时',
});

[fwh1990]

补充，如果使用snowpack或者vitejs打包，则不允许在源码中使用require。那么就需要建立一个新的中间文件简单处理

// File: token.ts
import { TokenModel } from '../../models/passport/TokenModel';

let tokenModel: TokenModel;
export const setTokenModel = (model: TokenModel) => tokenModel = model;
export const getToken = () => tokenModel.data.access_token;



// File: TokenModel.ts
import { getToken } from '../../token.ts'; 

export const tokenModel = new TokenModel();
setTokenModel(tokenModel);



// File: service.ts
import { getToken } from './token.ts'; 

export const $api = new HttpService<ErrorResponse>({
  headers: () => {
    return {
      Authorization: `Bearer ${getToken()}`,
      Accept: 'application/json',
      'Content-Type': 'application/json',
    };
  },
}