Vue-Resource is a Vue.js plugin that provides services for sending web requests and processing responses using XMLHttpRequest or JSONP .
Here we create a new project to complete the learning of Resource requests.
After the creation is completed, the corresponding configuration is completed at the same time. For the time being, we have not involved components, so we can delete the unnecessary parts first.
For specific project creation, refer to the article on creating a vue project under the blog [Front-end Learning] column for learning.
https://blog.csdn.net/weixin_46474921/category_11988425.html?spm=1001.2014.3001.5482
Table of contents
Introduce Vue-Resource to implement ajax request development steps:
1. Install vue-resource dependencies:
2. Import vue-reources and call the Vue.use(vue-reources) method to use the vue-resource plug-in
Two, vue-resource sends a request
3. Vue-resource sets global http parameters
1. Vue-resource import
Introduce Vue-Resource to implement ajax request development steps :
1. Install vue-resource dependencies :
First switch to our project in the vscode tool: cd 05_vueresource
Installation dependencies: cnpm i vue-resource –S
2. Import vue-reources and call the Vue.use(vue-reources) method to use the vue-resource plug-in
// 使用vue-resource插件
import VueResource from 'vue-resource'
// 全局注册使用
Vue.use(VueResource)
Two, vue-resource sends a request
Vue-resource sends network requests to get server data : send get , post , jsonp requests respectively
1. get request
this.$http: Get the http request object of vue-resource
Find some free API interfaces here, and you can also find them yourself
We first copy the link to view: https://api.apiopen.top/api/getHaoKanVideo?page=0&size=2
Next write the get request:
methods: {
getInfo() {
// vue-resource发送get请求
this.$http.get('https://api.apiopen.top/api/getHaoKanVideo?page=0&size=2').then(function (data) {
//data参数就是服务器接口返回给客户端的数据：json
console.log(data); // 拿到服务器返回的成功的数据
})
}have a test:
At this point we can see the encapsulated data structure returned to us by the background through the get request.
Next, we want to get the server data, which should be as follows:
Click the get request, and you will get the content, as follows: (here we use the previous api, you can replace it by yourself)
2. post request
this.$http: Get the http request object of vue-resource
Send post request : example interface: novel search interface
1: Send a post request, there is no form format by default, you need to specify enctype:
application/x-wwww-form-urlencoded
The third parameter of the post method: { emulateJSON: true } is to set the submission form type.
2: The second parameter of the post method, set the submission parameter eg: name: "Ghost Clowing Lamp" means to search for novels whose name is Ghost Blowing Lamp
3. jsonp request
Due to browser security restrictions, AJAX is not allowed to access data interfaces with different protocols, different domain names, and different port numbers. The browser considers this kind of access unsafe. The src attribute of the script tag points to the address of the data interface, because the script tag does not have cross-domain restrictions, this method of data acquisition is called JSONP.
vue-resource supports sending jsonp requests directly: example interface: 360 search
In the same html, if you use get request to send 360 search, it will not work, because you have visited a different server, the browser does not support it, so send jsonp request directly
3. Vue-resource sets global http parameters
In a real project, the interface addresses we request all have interface documents, and there are certain specifications, for example: the request root path of the interface is the same, and the default ajax transmission format is also json.
After Vue uses vue-resource, configuring global http parameters can reduce some repeated operations of sending requests
When sending a request, the host path part can be omitted, and when sending a post request, there is no need to set parameters separately:
//url地址一定不能带/
this.$http.get('satinApi?type=1&page=1').then(function (result) {
console.log(result.body)
this.items = this.items.concat(result.body.data);
})
this.$http.post('novelSearchApi', {name: "鬼吹灯"}).then(result => {
console.log(result.body)
})1: The same part of the path of the requested url can be omitted.
2: When sending a post request, the third form parameter type can be omitted.