How does the axios request data differ in the following ways, and how do you pass the same parameters as in the first case in the encapsulated axios method?

the company is now carrying out the front-end separation project. I use the axios method to ask for data at the front end. There are only the first and third data methods that can be used to request the API. But obviously, the data transmitted by the two methods are different. Because I do not quite understand the principle, I would like to ask a question here. I hope you can give us some advice.

the data that can be successfully requested by the login API is as follows:
request method:

axios:
:
:

Html css java javascript

Mar.21,2021

success here depends only on the Content-Type that the back end can handle. It may not be possible to change the back end which is right and which is wrong.

modify the first encapsulated method:

export function login(username, password) {
  return request({
       url: '...',
       method: '...',
       // 
       // axios post Content-type  x-www-form-urlencoded, data 
       //  get  params 
       data: {
           username,
           password
       } 
   })  
}

Previous: Why is it wrong when you go to setData when you go to angular for dynamic data binding?

Next: How to return 60, 000 file information in a folder by page by python webserver