I am getting to grips with vanilla JS and am trying to expand my horizons using some browser API's to make some more interesting applications. I am running Webpack, Babel and Jest on most of my packages. I am trying to establish the differences between browser API's and NPM packages.

I understand what they are individually but am unsure how they interact with each other. From my understanding :

API's of the browser are ready available for us to use which are often objects we have to instantiate to use their pre-written methods in our javascript code, they are not javascript objects but are available for us to use and like anything that is global is attached to the window object.

Third Party API's are accessible via endpoints. e.g. we can make a request to a weather API by our use typing in a city and we can use this as an argument to our asychronus request to the weather API to return some JSON to us.

I understand NPM packages like jest or webpack which are written in javascript. This allow us to install other javascript files which we can import or can be run as a standalone package in the terminal instead of having to make this functionality ourselves. There are no browser API's which allow us to do this so we call upon an NPM package. They have a purpose.

What I cant understand is packages like Axios. Does Axios build on the browser fetch API and just rename itself Axios ? Or the Payments Request NPM package? Why do we need that if we have a browser API called Payments Request ? There are even packages called Console and DOM. Why are these repeated as npm packages when we can access them anyway through the Browser ? Third Party API's I can access also all seem to have NPM packages ! What is the point of these if I can directly access the API anyway through a fetch or axios request?

On the whole I guess my question is, why are there so many NPM packages for things we can already access via a browser or third party API ? Confused.