I have a controller which calls multiple GET requests from Gmail API,
Basically, I am trying to get most recent 50 SENT MESSAGES.
What I did was pool these requests, and loop the Pool response and insert the retrieved data to my db.
$resp = Http::pool(function (Pool $pool) use ($messages_ids, $user, $label) {
$messages_ids->map(function ($value, $key) use ($user, $pool, $label) {
$pool->as('sent-'.$key)->withToken($user->token)->get($this->BASE_URL . $user->email . '/messages/' . $value['id'] . $this->QUERY_CONFIG);
return $pool;
});
});
collect($resp)->map(function ($req) use($label, $next_page_token, $user_model) {
Email::firstOrCreate(...)
});
return response()->json(['msg' => 'retrieved and saved']);
Now, In my vue component, I wanted to show a progress bar. so I used
const config = {
onUploadProgress: progressEvent => {
console.log(progressEvent);
// console.log(`progress: ${Math.floor((progressEvent.loaded * 100))}`)
}
}
const param = new FormData();
param.append('user', this.auth_user);
param.append('user_model', this.user_model);
param.append('date_filter', this.afterDateFilter);
param.append('label', 'sent');
let req = axios.post(url, param, config, headers);
req.then(res => {
return res;
}).catch(err => {
return Promise.reject(err)
})
Now, the progress jumps to 100%. I noticed that I should not have used onUploadProgress since it will get the content-length of the request's body parameters.
So, I used onDownloadProgress... however, the onDownloadProgress does not return the progressEvent.total maybe because content-length does not exist in the request's response header.
Here's the response header:
cache-control: no-cache, private
content-encoding: gzip
content-type: text/html; charset=UTF-8
date: Mon, 07 Mar 2022 06:07:54 GMT
server: nginx/1.10.3 (Ubuntu)
set-cookie: XSRF-TOKEN=eyJp...; expires=Mon, 07-Mar-2022 08:07:54 GMT; Max-Age=7200; path=/; samesite=lax
set-cookie: laravel_session=eyJp...; expires=Mon, 07-Mar-2022 08:07:54 GMT; Max-Age=7200; path=/; httponly; samesite=lax
vary: Accept-Encoding
via: 1.1 somehash.cloudfront.net (CloudFront)
x-amz-cf-id: somehash-Q==
x-amz-cf-pop: MNL50-C1
x-cache: Miss from cloudfront
Can anyone point out how I do progress bar when using HTTP facade and axios?
