Summary of the difference between axios params and data

1. Preface

During front-end development, when we send HTTP requests to the server through JavaScript or its framework (such as Axios), we often encounter situations where parameters need to be passed. Depending on the requirements, these parameters can be passedparamsordatapass. Understanding the difference between the two is essential for correctly building requests and ensuring accurate data transmission.

2. Use of params parameters

1. What is Params?

paramsUsually used in GET requests, it represents key-value pairs in URL query strings. When you useparamsWhen , these parameters will be directly appended to the requested URL, starting with "?", and separated by "&". For example: /api?name=value1&age=value2

This approach is ideal for passing small amounts of non-sensitive information, as they are directly exposed to the URL, easy to read but not suitable for transferring sensitive data.

2. Usage scenarios

• Filter and sort: For example, search results page, the keywords entered by the user can be used asparamspart of the filter results.
• Pagination: Specify information such as the number of current pages and the number of displayed per page.

III. Use of data parameters

1. What is Data?

dataIt is used in request bodies such as POST and PUT. It is part of the request and will not appear in the URL. This means that unlike GET requests, the data requested by the POST request is not cached, saved in the browser history, or accessed through bookmarks. This is particularly useful for sending large amounts of data or data containing sensitive information.

2. Usage scenarios

• Submit a form: When the user fills in the registration or login information, the information will usually be used asdataSubmit to the server.
• File upload: Large files are usually uploaded and also required to passdatafields to implement.

4. The difference and examples of params and data

1. Summary of main differences

2. Practical Examples

In the following example, you can see how to use it separatelyparamsanddata：

// Method 1 Use directly (params) {  return ('/api/questionBank/getQuestionList', params)
}
// Method 2 Use request to configure the object // Send request body data POST /api/questionBank/getQuestionList (with request body) exportfunctiongetQuestionList(data) {  returnrequest({
    url: '/api/questionBank/getQuestionList',
    method: 'post',
    data  // Send as request body  })
}
// Send URL parameter GET /api/questionBank/getQuestionList?key=valueexportfunctiongetQuestionList2(params) {  returnrequest({
    url: '/api/questionBank/getQuestionList',
    method: 'get',  // or post    params  // Send as URL parameter  })
}
// Send the request body and URL parameters simultaneously POST /api/questionBank/getQuestionList?key=value (with request body at the same time)exportfunctiongetQuestionList3(data, params) {  returnrequest({
    url: '/api/questionBank/getQuestionList',
    method: 'post',
    data,    // Request volume data    params   // URL parameters  })
}

5. Summary

Understand when and how to use itparamsanddataIt is one of the keys to building efficient and secure web applications. I hope this article can help you better understand the differences between these two methods and their application scenarios.

This is the end of this article about the difference between axios params and data. For more information about the differences between axios params and data, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!