Vue-异步请求
什么是异步请求(AJAX)?异步是(Asnychronous Javascript and XML)的简称,表示一个线程在发起一个请求后,在空闲等待的时间里去执行其它的任务,请求完成后通知线程再次进行后续结果的处理。同步是一个线程必须要等待上一次请求完成后再执行后续的操作。异步请求的哪些方式?原生js方式创建XMLHttpRequest对象jQueryAxiosFetch什么是Axios及特点?中
什么是异步请求(AJAX)?
异步是(Asnychronous Javascript and XML)的简称,表示一个线程在发起一个请求后,在空闲等待的时间里去执行其它的任务,请求完成后通知线程再次进行后续结果的处理。
同步是一个线程必须要等待上一次请求完成后再执行后续的操作。
异步请求的哪些方式?
- 原生js方式创建XMLHttpRequest对象
- jQuery
- Axios
- Fetch
什么是Axios及特点?
中文官网:http://www.axios-js.com/zh-cn/docs/
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES6规范。
特点:
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
使用Axios异步框架的开发步骤
普通vue项目使用script标签引入axios.js
<script src="js/axios.js"></script>
调用异步方法
<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>
axios遇到的问题?
vue中的this引用问题
// 解决axios中的this问题
var _this = this;
// 使用axios发送异步请求
axios.get("data/user.json",{
// 设置参数
params: {
id: 12345
}
})
前后台分离跨域问题
后台controller层:
@CrossOrigin: 作用在类上面
@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;
}
}
后台全局方式
@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请求别名
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结合
普通项目中结合
创建axios的实例
const $http = axios.create({
baseURL:'http://localhost'
})
设置全局属性
Vue.prototype.$axios = $http;
调用
this.$axios
.get(api) // 发送请求
.then() // 回调函数
.catch() // 异常回调
Vue-CLI工程中结合
在项目中安装:
npm install --save axios vue-axios
配置axios
import Vue from ‘vue’
import axios from ‘axios’
import VueAxios from ‘vue-axios’
Vue.use(VueAxios, axios)
使用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)
})
更多推荐
所有评论(0)