get post request development The most common and common request method, but how to implement it in vue? Here is a record of the configuration process.
- First create a new API folder in the src directory. Create a new request base class under the folder.
// The code for requesting the configuration process is like thisimport axios from "axios";
const requests = ({
//Configuration object baseURL: "", // Write your own domain name here timeout: 5000,
// withCredentials: true, //Asynchronous request to carry cookies headers: { // The parameters here can be set according to your needs. If you don't need them, you can not set them. "Content-Type": "application/x-www-form-urlencoded",
'token': "",
// "X-Requested-With": 'XMLHttpRequest',
"App-Version": "",
"Lng-Lat": "",
"System-Version": "",
"Mobile-Model": "",
"Device": "",
}
})
// Configure request interceptor((config) => {
// config configuration object request header return config
})
// Response Interceptor((resp) => {
// Request succeeded return
}, (error) => {
('Request failed.........')
return (new Error("Request failed"))
})
export default requests- This is probably the case with the requested basic class. It mainly sets up the requested shelf and configures some basic parameters.
Create another file under the API folder. Configure get and post requests.
// Basic class for importing requestsimport request from './request'
const http = {
get(url, params) {
const config = {
method: "get",
url: url
}
if (params) {
= params
}
return request(config)
},
post(url, params) {
const config = {
method: "post",
url: url
}
if (params) {
= params;
('The passed parameters========' + )
}
return request(config)
}
}
export default http- Actually, our request is configured here
Let's start to initiate our request
- Create a new request management class in the corresponding file directory according to your needs. Here is an example
// Import the request method classimport http from './http'
// Define a method to obtain verification code. Params is the parameters you want to pass. You can not pass them without passing them. export function getMsgCode(params) {
return ("/api/sendCode", params)
}
// Write another example of get request. I write the parameters here according to my own needs. I wrote them here directly for the demonstration. It is best to declare that a parameter is passed from the outside.export function getbilllist() {
return ("/api/bill/billList", { "household_id": "10131", "pay_status": "1", "community_id": "10", "year": "2022" })
}The request has been written. Let's see the specific use
// Declare two click events in the template <button @click="loadData">getask</button>
<button @click="loadbilllist">post ask</button>
// Import request api import { getbilllist, getMsgCode } from '@/api'
// Implement the request method const loadData = ()=> {
getbilllist().then((res) => {
("Request successfully returns value" + + );
}).catch((error) => {
('Request failed to return value' + error)
})
}
const loadbilllist = () => {
('Click to get the verification code.........')
getMsgCode({ params: { "phone": "13027703035" } }).then((res) => {
("Request successfully returns value" + + );
}).catch((error) => {
('Request failed to return value' + error)
})
}
// In vue3, you need to return the method return {
loadData,
loadbilllist
}Here the specific request method of axios is completed
This is the article about the configuration process of vue 3.0 using axios library to initiate post get. For more related vue initiate post get configuration content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!