Feature
- Send/Cancel/Rerun the HTTP request in the editor and view the response in a separate pane with syntax highlighting
- Submit GraphQL queries and author GraphQL variables in the editor
- Send cURL command in editor and copy HTTP request as cURL command
- Automatically save and view/delete request history
- Compose MULTIPLE requests in one file (separated by ### delimiter)
Go to extensions of VSCode instal Rest client => create file demo.http
Use
There are 2 ways to create a request variable
- Create variable in file http: @host = https://demo.vn
- Create variable in settings.json file of VSCode
- Click the settings button in the lower left corner of VSCode
- In the search box type: rest client => click Edit in settings.json
- In the settings.json file => find the word rest-client.environmentVariables and then declare the variable in $shared
123456<span class="token property">"rest-client.environmentVariables"</span> <span class="token operator">:</span> <span class="token punctuation">{</span><span class="token property">"$shared"</span> <span class="token operator">:</span> <span class="token punctuation">{</span><span class="token property">"REACT_APP_API_URL"</span> <span class="token operator">:</span> <span class="token string">"https://demo.vn"</span> <span class="token punctuation">,</span><span class="token punctuation">}</span> <span class="token punctuation">,</span><span class="token punctuation">}</span> <span class="token punctuation">,</span>
Create a name for requests
- The request is called login => put a pound sign at the beginning of the line => @name => request name
1 2 3 4 | <span class="token comment"># @name login</span> POST <span class="token punctuation">{</span> <span class="token punctuation">{</span> host <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator">/</span> api <span class="token operator">/</span> users <span class="token operator">/</span> token <span class="token operator">/</span> content <span class="token operator">-</span> <span class="token builtin">type</span> <span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token punctuation">{</span> contentType <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Request url includes
- Method ( GET/POST/PATCH/DELETE)
- Url: as shown in the picture is {{host}}/api/users/token/ with host as the variable declared above
- Params:
1 2 | GET https <span class="token punctuation">:</span> <span class="token operator">//</span> example <span class="token punctuation">.</span> com <span class="token operator">/</span> comments?page <span class="token operator">=</span> <span class="token number">2</span> <span class="token operator">&</span> pageSize <span class="token operator">=</span> <span class="token number">10</span> |
- Body:
1 2 3 4 5 6 7 8 9 | <span class="token comment"># @name login</span> POST <span class="token punctuation">{</span> <span class="token punctuation">{</span> host <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator">/</span> api <span class="token operator">/</span> users <span class="token operator">/</span> token <span class="token operator">/</span> content <span class="token operator">-</span> <span class="token builtin">type</span> <span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token punctuation">{</span> contentType <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">{</span> <span class="token string">"email"</span> <span class="token punctuation">:</span> <span class="token string">"admin@demo.vn"</span> <span class="token punctuation">,</span> <span class="token string">"password"</span> <span class="token punctuation">:</span> <span class="token string">"demo"</span> <span class="token punctuation">}</span> |
Get value from response Like the 3rd line of the figure in the feature section we assign access from the response of the request named login to the token variable This token variable will automatically receive the value when the login request is triggered
1 2 | <span class="token decorator annotation punctuation">@token</span> <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">{</span> login <span class="token punctuation">.</span> response <span class="token punctuation">.</span> body <span class="token punctuation">.</span> access <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Assign authorization token to request
1 2 3 4 5 6 | <span class="token comment">### get profile</span> <span class="token comment"># @name me</span> GET <span class="token punctuation">{</span> <span class="token punctuation">{</span> host <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator">/</span> api <span class="token operator">/</span> users <span class="token operator">/</span> me <span class="token operator">/</span> content <span class="token operator">-</span> <span class="token builtin">type</span> <span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token punctuation">{</span> contentType <span class="token punctuation">}</span> <span class="token punctuation">}</span> Authorization <span class="token punctuation">:</span> Bearer <span class="token punctuation">{</span> <span class="token punctuation">{</span> token <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
With ### in between requests to help separate requests from each other