Data Fetching

Data fetching is an essential part of any modern web application. In Viewi it can be handled by using Viewi\Common\HttpClient. Just inject it in your component or service and you are good to go. Like this:

private HttpClient $http;

function __init(HttpClient $http)
{
    $this->http = $http;
}

And you can use it inside of your component or service:

$this->http->get("/api/admin/users")
    ->then(
        function ($data) {
            // use $data here
        },
        function ($error) {
            // handle error here
        }
    );

Supported methods: get, post, put, delete, patch, options and one generic request.

First argument of the call is url, next one is body data, which will be automatically converted into the json format. Requests also support sending file(s). To process the response or error, use two callbacks inside of then method First callback will be called once the request succeeded and will contain the response data as the first parameter. The second one will be called if the response is not successful or any other errors have occurred.

For example, let’s take a look at the Contact Us post request:

$this->http
    ->post('/api/contact-us', [
        'email' => $this->email,
        'name' => $this->name,
        'message' => $this->message
    ])
    ->then(function ($response) {
        $this->statusMessage = $response['message'];
        if ($response['success']) {
            $this->statusMessage = 'We have received Your message and we will get to you shortly';
        }
    }, function () {
        $this->statusMessage = 'Something went wrong';
    });

Let’s take a look at this request:

public function save(DOMEvent $event)
{
    $event->preventDefault();
    $this->http->request(
        $this->Id ? 'put' : 'post',
        $this->Id ? "/api/sources/{$this->Id}" : '/api/sources',
        $this->source
    )
        ->then(
            function ($data) {
                echo $data;
                if (!$this->Id) {
                    $this->router->navigate("/sources/edit/{$data['data']->Id}");
                }
            },
            function ($error) {
                // echo $error;
            }
        );
}

Here we don’t know what type of request it’s going to be, so use the generic “request” method.

Now, let’s review this example:

public function fileChanged(DOMEvent $event)
{
    if (count($event->target->files)) {
        $file = $event->target->files[0];
        $this->http->post(
            "/api/files/upload?fileName="
                . urlencode($file->name)
                . "&type="
                . urlencode($file->type),
            $file
        )->then(
            function ($data) {
                $this->message = 'Uploaded successfully';
            },
            function ($error) {
                $this->message = 'Unable to upload.';
                echo $error;
            }
        );
    }
}

Here we upload the file to the server. And yes, you can just send out the DOM file as a data and Viewi will handle it for you.