I learned the local application of vue before, and operated the local data through various instructions provided by Vue.
But now there are very few purely local applications, which more or less interact with network data. This one wants axios, which uses Ajax inside. It is more convenient to use after encapsulation, and the single function is to send requests, so the capacity is small, and it can be combined with other frameworks or libraries, such as vue, so the following is how Use axios+vue in combination.
The next step is to learn how to use axios to send requests and get the content of the response.
To use axios, you must first import the package. After importing axios, the global axios object will be registered on the page, and requests can be sent through it.
The first is the get request, and the address is the interface address provided by the document. Then the .then method.
The first callback function passed internally will be triggered when the request response is complete.
The second request callback function will be triggered when the request fails.
Their formal parameters can be used to obtain information, one is the content of the server response, and the other is the information of the server error.
If you want to pass parameters, you just need to add a query string after the url, separated by ?.
The post request syntax is roughly the same as the get request, except that the data is written in the second parameter of the Post method in the form of an object.
Two requests are provided below, one is get request to get the joke interface. One is the interface for registering users through post requests.
querySelector("") is a button that gets class="".
The axios.get method initiates the request, and then writes the processing logic in the callback function passed in the .then method.
In the response object, data is the data we need, such as config and request, these are the requested information, and most of the time it is not used. You can see that the content of the server response can be obtained in the callback function, and it is triggered after the response is successful.
The second callback function is triggered when an error occurs in the request, and err is the wrong request this time.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link href="" type="text/css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style type="text/css">
</style>
</head>
<body>
<!--官网提供的axios在线地址-->
<button type="button" class="get">get请求</button>
<button type="button" class="post">post请求</button>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
document.querySelector(".get").onclick = function(){
axios.get("https://autumnfish.cn/api/joke/list?num=3")
.then(function(response){
console.log(response);
},function(err){
console.log(err)
})
}
</script>
</body>
</html>The post data is placed in the second parameter and written in the form of an object.
<script type="text/javascript">
document.querySelector(".get").onclick = function(){
axios.get("https://autumnfish.cn/api/joke/list?num=3")
.then(function(response){
console.log(response);
},function(err){
console.log(err)
})
}
document.querySelector(".post").onclick = function(){
axios.post("https://autumnfish.cn/api/user/reg",{username: "jack"})
.then(function(response){
console.log(response);
}),function(err){
}
}
</script>
Sometimes the data value is a returned string, and sometimes an object is returned. The data format returned by different interfaces is different.
It can be seen that all requests are based on XHR and Ajax, so axios is based on Ajax.
Axios must be imported first and then used. As with any library, import the package before using it.
The second is to use the post or get method provided by it to send the corresponding request.
In then, the first callback function is triggered successfully, and the second callback function fails. The obtained content depends on which callback function is triggered.
