Forem: Mike From CodeSpectre

Using Axios Interceptors In Javascript and Typescript

Mike From CodeSpectre — Sun, 22 Aug 2021 15:54:52 +0000

Axios is a robust, easy to use, promise-based http client for javascript and node.js. Axios provides developers with tools to handle all http-related functions. Axios interceptors are one of the essential tools Axios provides us for dealing with HTTP requests and responses.

Axios is a great way to handle any sort of HTTP requests in javascript or typescript, and I use it in all of my projects that require accessing an API. It provides all the necessary functions for passing data to and from APIs and then accessing it on the frontend.

If you've never used Axios, I suggest checking out the documentation here: https://axios-http.com/docs/intro

Interceptors

Interceptors are exactly what they sound like. They "intercept" requests and responses.

This can be useful if you need to perform some validation on the data before sending a request or when retrieving a response.

Here's an example of intercepting a request:

axios.interceptors.request.use(function (req) {

// if name not in request config then reject
    if (!req.name) {
        return Promise.reject("Error: Please Include a name");
    }
}, function(err) {
    return Promise.reject(err);
}

You can also use it on responses like this:

axios.interceptors.response.use(function (res) { 
// filter out null or undefined values using filter()
    let filtered_names = res?.data?.names.filter((a) => a);
    return filtered_names;
  }, function (err) {
    return Promise.reject(err);
  });

In the response example, we're filtering an array of names that was passed back to make sure no null or undefined values are included.

Custom Axios Instances

One of the nicest use cases of Axios interceptors is the ability to add them to a custom axios instance for your project.

If you are unfamiliar with Axios instances, it is a way to add all the data you need to send with each request automatically.

For example: in our project we need to always have an access token header and the base URL of our api. We can create a custom instance like this:

const customInstance = axios.create({
    baseURL: 'https://mytestingapi.com/api',
    headers: {'access_token': 'custom_token'}
});

Now whenever we need to perform a request with Axios, we can call customInstance instead and all our data will be included automatically.

Adding Interceptors To Custom Instances

Adding interceptors to Axios instances is done in the same way you'd do it normally, except instead of using the axios keyword, we'll use the name of our instance.

customInstance.interceptors.request.use(function(){/* do stuff here */});

Conclusion

I hope you found this simple introduction to interceptors to be useful. It is worth checking out the Axios documentation if you want to learn more.

Also don't forget to follow me on twitter @codespectremike to get notifications for my latest videos and articles.

https://twitter.com/codespectreMike

Complete Introduction To Insomnia For REST APIs

Mike From CodeSpectre — Wed, 18 Aug 2021 14:40:00 +0000

Insomnia is a great new graphical tool for testing and building REST APIs with an easy to use and slick interface.

Learn how to get up and running with Insomnia, and how to use it to test and build APIs.

Features

Organizing collections of requests
Completing any type of HTTP request
Creating new APIs based on standard specifications
Importing and exporting data
Customizable and user-friendly interface

The reason I started using Insomnia is primarily the interface. I used to do all my API testing using Node.js scripts and Axios, but I saw the light when I started with Insomnia. It's so easy to get up and running. Its possible to organize collections, duplicate requests, make all sorts of comments, and it supports pretty much every protocol you can think of (GRPC, SOAP, REST, XML). It's an all in one toolbox for API development.

Initial Setup

Before starting make sure you download and install Insomnia from
the homepage

Overview

Insomnia's main page lays out all the features pretty simply. You can:

Create new environments and set environment variables
Set cookies
Create requests or folders for requests

Insomnia lets you organize your requests and folders very nicely, and they give you a pretty straight forward layout that lets you see what you have available right away.

Creating Requests

To create our first request, navigate to the little plus button on the sidebar and select request from the dropdown. It will prompt you to name your request. This can be any name of your choosing. I like to give them descriptive names to keep my data organized.

You can create any type of HTTP request with Insomnia.

A request lets you do a few different things:

Set your request body in a number of formats, such as JSON, XML, etc.
Set your authentication method (Oauth, Basic, Bearer, and more)
If there are any URL query parameters in your request, there is the option to add them in the query section and they'll be formatted automatically for you
Set any additional request headers you may need
Write any docs associated with an endpoint that you are interested in.

Once you are ready to send requests, hit the big purple send button, and you'll see your response on the right hand side. This will show any errors, returned data, or headers.

Collections and Design Documents

When you click the Dashboard, Insomnia will take you to a zoomed out view of all your existing Collections. Collections are their own modular areas, each with their own environments, folders, and requests. This is a great way to keep track of all the different projects you are working on, especially if you interact with many api's regularly.

You can also click Create in the right corner, which brings down a dropdown for other features. This is where you'll find Design Documents. When you create a Design Document, it takes you to a new page where you can create a specification for your API using OpenAPI *standards. (*Note: If you are interested in learning more about *OpenAPI *specs, I suggest checking out the Swagger.io documentation.

You can create YAML specs of your API here. Here's a small example using the Swagger Petstore API from the documentation:

Conclusion

Insomnia gives you all the tools you need to rapidly test and build APIs. I hope you found this to be a useful introduction to Insomnia. It has been an indispensable tool for me, and I hope it can be for you as well! If you are interested in learning more from me, don't forget to follow, or check me out on YouTube at
Codespectre

The Ultimate Guide To Neovim and Tmux in 2021 for fullstack engineers

Mike From CodeSpectre — Mon, 26 Jul 2021 14:38:54 +0000

Introduction

Getting into Vim can be a pretty daunting task. I know it was for me. I didn't start truly learning how to use it well into the 3rd year of my career as a full-stack engineer. Over the course of the past year I've began the Vim journey and I must say I couldn't be happier. Everything with Vim is faster, more agile, and all around an awesome experience. I'm going to show you how to set up NeoVim to meet all your needs as a modern fullstack developer.

My Initial Setup (Zsh & Tmux)

I code on both a macbook and a Linux desktop. On the linux desktop, I use Terminator as my main terminal, while on Mac I use Iterm2. On both machines I use Zsh with oh-my-zsh. I'm not going to really talk about setting up oh-my-zsh today, but its worth checking out here:

https://ohmyz.sh/

I also use Tmux for swapping between windows on Mac. If you are unfamiliar with Tmux, its an abbreviation for Terminal Multiplexer, & it is a great way to have multiple tabs and panes open and swap
between them.

brew install tmux
tmux -V

Installation

First things first, we have to install neovim. If you're on linux you can use whatever package manager you usually use.

sudo apt-get install neovim

If you're on Mac use Homebrew.

brew install neovim

Next, we need to install vim-plug, which we'll be using to install plugins that we need.

You can find the plugin at [github.com/junegunn/vim-plug(github.com/junegunn/vim-plug)

You can copy this command from here or from their Github repo:

sh -c 'curl -fLo "${XDG_DATA_HOME:-$HOME/.local/share}"/nvim/site/autoload/plug.vim --create-dirs \
       https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim'

Neovim Configuration

Our next step is to configure Neovim for our needs. Let's create our config file first.

mkdir ~/.config/nvim
touch ~/.config/nvim/init.vim

Let's open up our init.vim file we just made, and add a section for our plugins.

call plug#begin("~/.vim/plugged")
"Our plugins will go in the middle
call plug#end()

Now that we have that, lets set up the plugins we need to install. This is my current plugin configuration for fullstack web development.

call plug#begin("~/.vim/plugged")
Plug 'junegunn/fzf', {'do': { -> fzf#install() } }
Plug 'junegunn/fzf.vim'
Plug 'pangloss/vim-javascript'
Plug 'peitalin/vim-jsx-typescript'
Plug 'leafgarland/typescript-vim'
Plug 'dracula/vim'
Plug 'scrooloose/nerdtree'
Plug 'ryanoasis/vim-devicons'
Plug 'neoclide/coc.nvim', {'branch':'release'}
let g:coc_global_extensions = ['coc-tsserver',
\'coc-python',
\ 'coc-pydocstring',
\ 'coc-json',
\ 'coc-html-css-support',
\ 'coc-css',
\ 'coc-sql',
\ 'coc-yaml']
" Plug 'sheerun/vim-polyglot',
Plug 'preservim/nerdcommenter'
Plug 'jparise/vim-graphql'
Plug 'vim-airline/vim-airline'
Plug 'vim-airline/vim-airline-themes'
" post install (yarn install | npm install) then load plugin only for editing supported files
Plug 'prettier/vim-prettier', {
\ 'do': 'yarn install',
\ 'for': ['javascript', 'typescript', 'css', 'less', 'scss', 'json', 'graphql', 'markdown', 'vue', 'yaml', 'html'] }
call plug#end()

In Neovim all you need to do to install all these plugins is run

:PlugInstall

We're also going to add a few lines to the top of our init.vim.

set scrolloff=8
set number
set relativenumber
set tabstop=4
set shiftwidth=4
set expandtab
set smartindent
set encoding=utf8
let g:airline_powerline_fonts = 1

Theming

Now let's enable our colorscheme. I use Dracula at the moment, but I tend to swap back and forth between Dracula and Gruvbox Dark.

Add these lines below our plugin declarations.

if (has("termguicolors"))
set termguicolors
endif
syntax enable
colorscheme dracula

Keymapping

Next we're going to set up some nice keymappings. I like setting mapleader to space, but I know some people aren't too fond of this. It's all personal preference honestly, if you find you're not using it, don't hesitate to switch to something else.

One mapping that I love to use is jk. I use jk to automatically escape, save, and then return when I'm in insert mode. I've found it to be a very useful little shortcut. The other shortcuts are for searching files and such.

The pv map opens up a new tab to the side.
The pf map opens up a finder that we can use for quickly searching.
The Ctrl-P map is for searching for files within a Git repository. This is useful for finding files inside your software project.

let mapleader = " "
nnoremap <leader>pv :Vex<CR>
nnoremap <leader>pf :Files<CR>
inoremap jk <esc>:w<CR>
nnoremap <C-p> :GFiles<CR>

Nerdtree Configuration

To add IDE-like file navigation to Neovim, I use a plugin called NerdTree. I've mapped the toggle for Nerdtree to Ctrl-A, which I've found works pretty well for me.

let g:NERDTreeShowHidden = 1
let g:NERDTreeMinimalUI = 0
let g:NERDTreeIgnore = ['node_modules']
let NERDTreeStatusLine='NERDTree'
" Automaticaly close nvim if NERDTree is only thing left open
autocmd bufenter * if (winnr("$") == 1 && exists("b:NERDTree") && b:NERDTree.isTabTree()) | q | endif
" Toggle
nnoremap <silent> <C-a> :NERDTreeToggle<CR>

Final Configurations

I have a couple more small configurations at the end of my init.vim.

Opening an inline terminal with Ctrl-n
Setting prettier to auto format and to prefer to use the prettier config file in the project, instead of the default
A setting to open new panes to the right and below

" open new split panes to right and below
set splitright
set splitbelow
" turn terminal to normal mode with escape
tnoremap <Esc> <C-\><C-n>
" start terminal in insert mode
au BufEnter * if &buftype == 'terminal' | :startinsert | endif
" open terminal on ctrl+n
function! OpenTerminal()
split term://zsh
resize 10
endfunction
nnoremap <c-n> :call OpenTerminal()<CR>
let g:prettier#autoformat_config_present = 1
let g:prettier#config#config_precedence = 'prefer-file'

Conclusion

I hope you find this guide useful! This is my current Neovim setup and I've been very happy with the result. If you're not interested in following along. I'm including the full init.vim file below.

Don't forget to follow me on Twitter: @codespectremike

Init.Vim

set scrolloff=8
set number
set relativenumber
set tabstop=4
set shiftwidth=4
set expandtab
set smartindent
set encoding=utf8
let g:airline_powerline_fonts = 1

call plug#begin("~/.vim/plugged")
Plug 'junegunn/fzf', {'do': { -> fzf#install() } }
Plug 'junegunn/fzf.vim'
Plug 'pangloss/vim-javascript'
Plug 'peitalin/vim-jsx-typescript'
Plug 'leafgarland/typescript-vim'
Plug 'dracula/vim'
Plug 'scrooloose/nerdtree'
Plug 'ryanoasis/vim-devicons'
Plug 'neoclide/coc.nvim', {'branch':'release'}
let g:coc_global_extensions = ['coc-tsserver',
\'coc-python',
\ 'coc-pydocstring',
\ 'coc-json',
\ 'coc-html-css-support',
\ 'coc-css',
\ 'coc-sql',
\ 'coc-yaml']
" Plug 'sheerun/vim-polyglot',
Plug 'preservim/nerdcommenter'
Plug 'jparise/vim-graphql'
Plug 'vim-airline/vim-airline'
Plug 'vim-airline/vim-airline-themes'
" post install (yarn install | npm install) then load plugin only for editing supported files
Plug 'prettier/vim-prettier', {
\ 'do': 'yarn install',
\ 'for': ['javascript', 'typescript', 'css', 'less', 'scss', 'json', 'graphql', 'markdown', 'vue', 'yaml', 'html'] }
call plug#end()

if (has("termguicolors"))
set termguicolors
endif
syntax enable
colorscheme dracula

let mapleader = " "
nnoremap <leader>pv :Vex<CR>
nnoremap <leader>pf :Files<CR>
inoremap jk <esc>:w<CR>
nnoremap <C-p> :GFiles<CR>

let g:NERDTreeShowHidden = 1
let g:NERDTreeMinimalUI = 0
let g:NERDTreeIgnore = ['node_modules']
let NERDTreeStatusLine='NERDTree'
" Automaticaly close nvim if NERDTree is only thing left open
autocmd bufenter * if (winnr("$") == 1 && exists("b:NERDTree") && b:NERDTree.isTabTree()) | q | endif
" Toggle
nnoremap <silent> <C-a> :NERDTreeToggle<CR>

" open new split panes to right and below
set splitright
set splitbelow
" turn terminal to normal mode with escape
tnoremap <Esc> <C-\><C-n>
" start terminal in insert mode
au BufEnter * if &buftype == 'terminal' | :startinsert | endif
" open terminal on ctrl+n
function! OpenTerminal()
split term://zsh
resize 10
endfunction
nnoremap <c-n> :call OpenTerminal()<CR>
let g:prettier#autoformat_config_present = 1
let g:prettier#config#config_precedence = 'prefer-file'