Vue-异步请求

什么是异步请求(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)
   })

猜你喜欢