support api

[swarakaka]

Hello developers,
however I know inertiajs supports it to lazily call back a variable that hasn't already been rendered. But hasn't thought of inertiajs supporting api too? That is only through an option to disable the 'x-inertia' headers parameter and the return to support Promise. I have given an example below. As an idea, the sample could be improved.

public visit(
    href: string | URL,
    {
        method = 'get',
        data = {},
        replace = false,
        preserveScroll = false,
        preserveState = false,
        isApiRequest = false, // allow inertia to support an api
        only = [],
        headers = {},
        errorBag = '',
        forceFormData = false,
        onCancelToken = () => {},
        onBefore = () => {},
        onStart = () => {},
        onProgress = () => {},
        onFinish = () => {},
        onCancel = () => {},
        onSuccess = () => {},
        onError = () => {},
        queryStringArrayFormat = 'brackets',
    }: VisitOptions = {},
): Promise<AxiosResponse> | void {
    let url = typeof href === 'string' ? hrefToUrl(href) : href

    if ((hasFiles(data) || forceFormData) && !(data instanceof FormData)) {
        data = objectToFormData(data)
    }

    if (!(data instanceof FormData)) {
        const [_href, _data] = mergeDataIntoQueryString(method, url, data, queryStringArrayFormat)
        url = hrefToUrl(_href)
        data = _data
    }

    const visit: PendingVisit = {
        url,
        method,
        data,
        replace,
        preserveScroll,
        preserveState,
        only,
        headers,
        errorBag,
        forceFormData,
        queryStringArrayFormat,
        cancelled: false,
        completed: false,
        interrupted: false,
        isApiRequest,
    }

    if (onBefore(visit) === false || !fireBeforeEvent(visit)) {
        return Promise.reject("Before event returned false or before event firing failed.");
    }

    if (this.activeVisit) {
        this.cancelVisit(this.activeVisit, { interrupted: true })
    }

    this.saveScrollPositions()

    const visitId = this.createVisitId()
    this.activeVisit = {
        ...visit,
        onCancelToken,
        onBefore,
        onStart,
        onProgress,
        onFinish,
        onCancel,
        onSuccess,
        onError,
        queryStringArrayFormat,
        cancelToken: new AbortController(),
    }

    onCancelToken({
        cancel: () => {
            if (this.activeVisit) {
                this.cancelVisit(this.activeVisit, { cancelled: true })
            }
        },
    })

    fireStartEvent(visit)
    onStart(visit)

    const axiosConfig: AxiosRequestConfig = {
        method,
        url: urlWithoutHash(url).href,
        data: method === 'get' ? {} : data,
        params: method === 'get' ? data : {},
        signal: this.activeVisit.cancelToken.signal,
        headers: {
            ...headers,
            Accept: 'text/html, application/xhtml+xml',
            'X-Requested-With': 'XMLHttpRequest',
            'X-Inertia': !visit.isApiRequest,
            ...(only.length
                ? {
                    'X-Inertia-Partial-Component': this.page.component,
                    'X-Inertia-Partial-Data': only.join(','),
                }
                : {}),
            ...(errorBag && errorBag.length ? { 'X-Inertia-Error-Bag': errorBag } : {}),
            ...(this.page.version ? { 'X-Inertia-Version': this.page.version } : {}),
        },
        onUploadProgress: (progress) => {
            if (data instanceof FormData) {
                progress.percentage = progress.progress ? Math.round(progress.progress * 100) : 0;
                fireProgressEvent(progress);
                onProgress(progress);
            }
        },
    };

    // If it's an API request, return a promise that resolves or rejects based on the outcome
    if (visit.isApiRequest) {
        return new Promise<AxiosResponse>((resolve, reject) => {
            Axios(axiosConfig)
                .then(response => {
                    // Handle successful API response
                    resolve(response); // Resolve the promise
                })
                .catch(error => {
                    // Handle API error
                    if(error.response && error.response.data){
                      this.setPage(error.response.data, { visitId })
                    }
                    reject(error); // Reject the promise with the error
                });
        });
    }

    // For non-API requests, continue with the existing logic
    Axios(axiosConfig)
        .then((response): Promise<any> | void => {
        const pageResponse: Page = response.data
        if (only.length && pageResponse.component === this.page.component) {
          pageResponse.props = { ...this.page.props, ...pageResponse.props }
        }
        preserveScroll = this.resolvePreserveOption(preserveScroll, pageResponse) as boolean
        preserveState = this.resolvePreserveOption(preserveState, pageResponse)
        if (preserveState && window.history.state?.rememberedState && pageResponse.component === this.page.component) {
          pageResponse.rememberedState = window.history.state.rememberedState
        }
        const requestUrl = url
        const responseUrl = hrefToUrl(pageResponse.url)
        if (requestUrl.hash && !responseUrl.hash && urlWithoutHash(requestUrl).href === responseUrl.href) {
          responseUrl.hash = requestUrl.hash
          pageResponse.url = responseUrl.href
        }
        return this.setPage(pageResponse, { visitId, replace, preserveScroll, preserveState })
      })
      .then(() => {
        const errors = this.page.props.errors || {}
        if (Object.keys(errors).length > 0) {
          const scopedErrors = errorBag ? (errors[errorBag] ? errors[errorBag] : {}) : errors
          fireErrorEvent(scopedErrors)
          return onError(scopedErrors)
        }
        fireSuccessEvent(this.page)
        return onSuccess(this.page)
      })
      .catch((error:any) => {
        if (this.isInertiaResponse(error.response)) {
          return this.setPage(error.response.data, { visitId })
        } else if (this.isLocationVisitResponse(error.response)) {
          const locationUrl = hrefToUrl(error.response.headers['x-inertia-location'])
          const requestUrl = url
          if (requestUrl.hash && !locationUrl.hash && urlWithoutHash(requestUrl).href === locationUrl.href) {
            locationUrl.hash = requestUrl.hash
          }
          this.locationVisit(locationUrl, preserveScroll === true)
        } else if (error.response) {
          if (fireInvalidEvent(error.response)) {
            modal.show(error.response.data)
          }
        } else {
          return Promise.reject(error)
        }
      })
      .then(() => {
        if (this.activeVisit) {
          this.finishVisit(this.activeVisit)
        }
      })
      .catch((error:any) => {
        if (!Axios.isCancel(error)) {
          const throwException = fireExceptionEvent(error)
          if (this.activeVisit) {
            this.finishVisit(this.activeVisit)
          }
          if (throwException) {
            return Promise.reject(error)
          }
        }
      })
  }

[vitalijalbu]

I also want this feature, now I'm using axios but will be great in inertia also support api calls