后端程序员的前端必备【Vue】 - 06 axios语法、使用、并发请求、全局配置、拦截器

最新推荐文章于 2023-07-07 06:04:15 发布

yinying293

最新推荐文章于 2023-07-07 06:04:15 发布

阅读量157

点赞数 2

分类专栏：后端程序员的前端路线 # 框架演进 Java 文章标签：前端 vue.js javascript java 前端框架

本文链接：https://blog.csdn.net/yinying293/article/details/130483094

版权

Java 同时被 3 个专栏收录

69 篇文章 1 订阅

订阅专栏

框架演进

48 篇文章 0 订阅

订阅专栏

后端程序员的前端路线

14 篇文章 0 订阅

订阅专栏

1 axios介绍

Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架，她的主要作用就是实现 AJAX 异步通信

由于 Vue.js 是一个视图层框架并且作者（尤雨溪）严格准守 SoC （关注度分离原则），所以 Vue.js 并不包含 AJAX 的通信功能，为了解决通信问题，作者单独开发了一个名为 vue-resource 的插件，不过在进入 2.0 版本以后停止了对该插件的维护并推荐了 Axios 框架

2 axios使用

导入axios.js

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

使用axios发送异步请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <button @click="getData1">异步请求获取数据</button>
    </div>
</body>
	<script>
	    new Vue({
	        el:"#app",
	        data:{
	        },
	        methods:{
	        	getData1:function(){
	        		console.log("...")
	        		axios.get('http://localhost:8080/users').then(function(res){
		        		console.log(res);
		        	}).catch(function(){
		        		console.log("请求错误,回调函数")
		        	})
	        	}
	        }
	    })
	</script>
</html>

注意：后端返回的数据中,res.data才是我们需要的数据

3 后端解决跨域问题

方式1：在Controller中添加@CrossOrigin注解

@RestController
@CrossOrigin
@RequestMapping("users")
public class UserController {
    
}

方式2：全局配置

@Configuration
public class MyWebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") //设置可以请求的资源
            .allowedOrigins("http://127.0.0.1:8020") //设置跨域请求的地址
            .allowedHeaders("*") //设置允许携带请求头
            .allowCredentials(true)//设置允许携带cookie
            .allowedMethods("*") //设置允许的请求方式(get\post\put\delete)
            //表示在指定的时间内不再检验跨域
            .exposedHeaders(HttpHeaders.SET_COOKIE).maxAge(3600L);
        
    }
}

4 axios其他请求方式

4.1 指定请求参数

// 为给定 ID 的 user 创建请求
axios.get('/users?id=12345').then(function (res) {
    console.log(res);
}).catch(function (error) {
    console.log(error);
});

// 可选地，上面的请求可以这样做
axios.get('/user', {
    params: {
        id: 12345
    }
}).then(function (res) {
    console.log(res);
}).catch(function (error) {
    console.log(error);
});

4.2 其他请求方式（post、put、delete）

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

4.3 其他语法

axios.get(url[, config])

axios.delete(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

5 并发请求

function req1(){
    return axios.get("url1",{
        params:{

        }
    });
}

function req2(){
    return axios.get("url2",{
        params:{

        }
    });
}

axios.all([req1(),req2()]).then(axios.spread(function (res1, res2) {
    // 两个请求现在都执行完成
}));

6 axios全局配置

//axios全局配置
axios.defaults.timeout = 10000;   // 超时时间
axios.defaults.baseURL = "http://localhost:8080/";  // baseURL

7 axios-拦截器

7.1 请求拦截器

 //定义axios的拦截器
axios.interceptors.request.use(function(config){
    console.log("===已拦截axios请求===") 
    //axios请求信息
    console.log(config)
    //未来可以在请求头中存放token信息用于身份校验等。

    //一定要记得返回这个对象否则请求不会发出！！！
    return config;
})

7.2 响应拦截器

//定义axios的响应拦截器
axios.interceptors.response.use(function(response){
    //response表示服务器响应数据信息
    
    //获取到后端返回的数据。一定要记得返回response对象
	return response.data;
})