What is asynchronous request (AJAX)?
Asynchronous is the abbreviation of (Asnychronous Javascript and XML), which means that after a thread initiates a request, it performs other tasks in the idle waiting time, and notifies the thread to process subsequent results again after the request is completed.
Synchronization is that a thread must wait for the completion of the previous request before performing subsequent operations.
What are the ways of asynchronous request?
- Native js way to create XMLHttpRequest object
- jQuery
- Axios
- Fetch
What is Axios and its features?
Chinese official website: http://www.axios-js.com/zh-cn/docs/
axios is a Promise-based HTTP client for browsers and nodejs. It is essentially a encapsulation of native XHR, except that it is an implementation version of Promise and conforms to the latest ES6 specifications.
Features:
- Create XMLHttpRequests from the browser
- Create http request from node.js
- Support Promise API
- Intercept request and response
- Convert request data and response data
- Cancel request
- Automatically convert JSON data
- The client supports defense against XSRF
Development steps using Axios asynchronous framework
Ordinary vue projects use script tags to introduce axios.js
<script src="js/axios.js"></script>
Call asynchronous method
<body>
<div id="app">
<button @click="getData()">发送请求</button>
<p>{
{name}}</p>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
name:''
},
methods:{
getData(){
// 解决axios中的this问题
var _this = this;
// 使用axios发送异步请求
axios.get("data/user.json",{
// 设置参数
params: {
id: 12345
}
})
// 接收响应的数据
.then(function(resp){
_this.name = resp.data.name;
console.log(resp.data);
})
// 异常的处理
.catch(function(error){
console.log("error:"+error)
})
}
}
})
</script>
Problems encountered by axios?
This reference problem in vue
// 解决axios中的this问题
var _this = this;
// 使用axios发送异步请求
axios.get("data/user.json",{
// 设置参数
params: {
id: 12345
}
})
Front-end separation and cross-domain issues
Back-end controller layer:
@CrossOrigin: acting on the class
@RestController
@CrossOrigin
public class UserController {
@GetMapping("/user/{id}")
public User getUser(@PathVariable("id") int id){
User user = new User();
user.setUid(1);
user.setUsername("张三");
user.setPassword("123");
user.setCreateTime(DateUtil.toSqlDate(new Date()));
return user;
}
}
Back-end global mode
@Configuration
public class AppConfig {
// 全局跨域配置： 可以在java后台配置，也可以在vue前台配置
private CorsConfiguration addCorsConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
//请求常用的三种配置，*代表允许所有，当时你也可以自定义属性（比如header只能带什么，只能是post方式等等）
corsConfiguration.addAllowedOrigin("*");
corsConfiguration.addAllowedHeader("*");
corsConfiguration.addAllowedMethod("*");
return corsConfiguration;
}
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", addCorsConfig());
return new CorsFilter(source);
}
}
axios request alias
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
Vue-axios combined with
common projects to
create an axios instance
const $http = axios.create({
baseURL:'http://localhost'
})
Set global properties
Vue.prototype.$axios = $http;
transfer
this.$axios
.get(api) // 发送请求
.then() // 回调函数
.catch() // 异常回调
Combine
in the Vue-CLI project Install in the project:
npm install --save axios vue-axios
Configure axios
import Vue from ‘vue’
import axios from ‘axios’
import VueAxios from ‘vue-axios’
Vue.use(VueAxios, axios)
Use axios
Vue.axios.get(api).then((response) => {
console.log(response.data)
})
this.axios.get(api).then((response) => {
console.log(response.data)
})
this.$http.get(api).then((response) => {
console.log(response.data)
})