Can't display time in my own self developed plugin

Here is My DataSource.ts code

import { getBackendSrv } from '@grafana/runtime';
import {
  DataFrame,
  DataQueryRequest,
  DataQueryResponse,
  DataSourceApi,
  DataSourceInstanceSettings,
} from '@grafana/data';

import { MyDataSourceOptions, MyQuery } from './types';
import { toGrafanaDataFrame } from './functions';

export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
  username: string;
  password: string;
  url: string;
  dataFrames: DataFrame[];

  constructor(instanceSettings: DataSourceInstanceSettings<MyDataSourceOptions>) {
    super(instanceSettings);
    this.url = instanceSettings.jsonData.url;
    this.password = instanceSettings.jsonData.password;
    this.username = instanceSettings.jsonData.username;
    this.dataFrames = [];
  }

  async query(options: DataQueryRequest<MyQuery>): Promise<DataQueryResponse> {
    const { range } = options;
    this.dataFrames = []; // remove this line, after send twice, it can display time.
    options.targets.map(target => {
      target.from = range!.from.valueOf();
      target.to = range!.to.valueOf();
      this.doRequest(target).then(response => {
        response.data.map((a: { name: string; series: [any] }) => this.dataFrames.push(toGrafanaDataFrame(a)));
      });
    });
    console.log(this.dataFrames);
    return Promise.all(this.dataFrames).then(data => ({ data }));
  }

  async doRequest(query: MyQuery) {
    return await getBackendSrv().datasourceRequest({
      method: 'POST',
      url: this.url + '/query',
      data: query,
    });
  }

  async testDatasource() {
    console.log(this.url + '/user/login?username=' + this.username + '&password=' + this.password);
    return getBackendSrv().datasourceRequest({
      url: this.url + '/user/login?username=' + this.username + '&password=' + this.password,
      method: 'GET',
    });
  }
}

function.ts code:

import { SelectableValue, toDataFrame } from '@grafana/data';

export const toOption = (value: string) => ({ label: value, value } as SelectableValue<string>);

export const toGrafanaDataFrame = (col: { name: string; series: [any] }) => {
  const frame = toDataFrame(col.series);
  frame.name = col.name;
  return frame;
};

I find it can receive data, but can’t display. but I found when I remove this.dataFrames = []; in query and send twice, then it can display data. Obviously, This goes against my original idea. I want dataFrames empty before send request.