AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

【轻松入门vue】vue前后端交互

2022-07-20 1045
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Vue前后端交互六、Vue前后端交互1. 前后端交互模式2. Promise的相关概念和用法Promise基本用法**then参数中的函数返回值**基于Promise处理多个Ajax请求demoPromise常用API3. fetch进行接口调用fetch基本用法fetch请求参数fetch响应结果4. axios进行接口调用axios基本用法axios的常用API（参数传递）5. asyns/await接口调用async/await的基本用法多个异步请求的场景六、Vue前后端交互项目中一般结合asyn

六、Vue前后端交互

项目中一般结合async/await语法使用axios调用接口

1. 前后端交互模式

1. 接口调用方式

原生ajax、基于jQuery的ajax、fetch、axios

2. 传统的URL

格式：schema://host:port/path?query#fragment

  1. schema：协议，例如http、https、ftp等。
  2. host：域名或者IP地址。
  3. port：端口，http默认端口80，可以省略。
  4. path：路径，例如/abc/a/b/c
  5. query：查询参数，例如uname=lisi&age=12
  6. fragment：锚点（哈希Hash），用于定位页面的某个位置

3. Restful形式的URL

HTTP请求方式

  1. GET 查询
  2. POST 添加
  3. PUT 修改
  4. DELETE 删除

2. Promise的相关概念和用法

JS中常见的异步调用：定时任务、ajax、事件函数

Promise是异步编程的一种解决方案，从语法上讲，Promise是一个对象，从它可以获取异步操作的消息。

使用Promise主要有以下好处：

  • 可以避免多层异步调用嵌套问题（回调地狱）
  • Promise对象提供了简介的API，使得控制异步操作更加容易
Promise基本用法
  • 实例化Promise对象，构造函数中传递函数，该函数中用于处理异步任务。
  • resolve和reject两个（方法）参数用于处理成功和失败两种情况，并通过p.then获取处理结果。
var p = new Promise(function(resolve,reject){
    //成功时调用resolve()
    //失败时调用reject()
});
p.then(function(ret){
    //从resolve得到正常结果
},function(ret){
    //从reject得到错误信息
});
then参数中的函数返回值
  1. 返回Promise实例对象

返回该实例对象用于调用下一个then

p.then(function(ret){
    return new Promise(...)
}).then(...)
  1. 返回普通值

返回的普通值会直接传递给下一个then，通过then函数中函数的参数接收该值（底层会对返回的普通值封装为一个Promise使得能够继续调用then）

p.then(function(ret){
    return '莫逸风';    
}).then(function(ret){
    alert(ret);        //莫逸风
})
基于Promise处理多个Ajax请求demo
<script>
    //Promise基本使用，原生ajax
    function getText(url) {
        var p = new Promise(function (resolve, reject) {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                //readyState表示文档状态
                if (xhr.readyState != 4) return;
                if (xhr.readyState == 4 && xhr.status == 200){
                    //处理正常情况
                    resolve(xhr.responseText);
                }else {
                    reject('服务器错误');
                }
            };
            xhr.open('get',url);
            xhr.send(null);
        });
        return p;
    }
    //链式调用解决回调地狱,return一个新的调用就可以继续调用新的then()了。
    getText('http://localhost:8088/saymo').then(
        function (data) {
            alert(data);
            return  getText('http://localhost:8088/sayyi');
        },function (info) {
            alert(info);
        }
    ).then(
        function (data) {
            alert(data);
            return getText('http://localhost:8088/sayfeng')
        }
    ).then(
        function (data) {
            alert(data);
        }
    );
</script>

上方调用方式会调用后端，产生跨域问题（解决方案回头仔细研究，先放一段代码(SpringBoot)）

跨域解决方案参考

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {
    public CorsConfig(){
    }

    @Bean
    public CorsFilter corsFilter(){
        //1.添加cors配置信息
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedOrigin("http://localhost:63343");
        //设置是否发送cookie信息
        config.setAllowCredentials(true);
        //设置允许请求的方式
        config.addAllowedMethod("*");
        //设置允许的header
        config.addAllowedHeader("*");

        //2.为url添加映射路径
        UrlBasedCorsConfigurationSource corsSource = new UrlBasedCorsConfigurationSource();
        corsSource.registerCorsConfiguration("/**",config);

        //3.返回从新定义好的corsSource
        return new CorsFilter(corsSource);
    }
}
Promise常用API
  1. 实例方法
p.then() //得到异步任务的处理结果
p.catch() //获取异常信息
p.finally() //成功与否都会执行（尚且不是正式标准）

demo

<script>
    function foo() {
        return new Promise(function (resolve, reject) {
            setTimeout(function () {
                //resolve(123)//正常情况
                reject("出错了");//错误情况
            },1000)
        })
    }
    foo().then(function (data) {
        alert(data);
    }).catch(function (data) {
        alert(data);
    }).finally(function () {
        alert("结束了")
    })
    //与上面效果相同
    foo().then(function (data) {
        alert(data);
    },function (data) {
        alert(data);
    }).finally(function () {
        alert("结束了")
    })
</script>
  1. 对象方法
Promise.all()并发处理多个异步任务，所有任务都执行完成才能得到结果

Promise.race()并发处理多个异步任务，只要有一个任务完成就能得到结果

demo

<script>
    function getText(url) {
        var p = new Promise(function (resolve, reject) {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                //readyState表示文档状态
                if (xhr.readyState != 4) return;
                if (xhr.readyState == 4 && xhr.status == 200){
                    //处理正常情况
                    resolve(xhr.responseText);
                }else {
                    reject('服务器错误');
                }
            };
            xhr.open('get',url);
            xhr.send(null);
        });
        return p;
    }

    var p1 = getText("http://localhost:8088/saymo");
    var p2 = getText("http://localhost:8088/sayyi");
    var p3 = getText("http://localhost:8088/sayfeng");

    //result是一个数组形式的三个数据，顺序和p1,p2,p3顺序相同
    Promise.all([p1,p2,p3]).then(function (result) {
        alert(result);
    })
    //result返回一个数据，最快返回的一个
    Promise.race([p1,p2,p3]).then(function (result) {
        alert(result);
    })
</script>

3. fetch进行接口调用

更加简单的数据获取方式，功能更强大、更灵活，可以看做是xhr的升级版

基于Promise实现

fetch基本用法

语法结构

fetch(url).then(fn2)
          .then(fn3)
          ...
          .cach(fn)

基本用法

fetch('/abc').then(data=>{
    return data.text();
}).then(ret=>{
    //这里得到的才是最终的数据
    console.log(ret);
})

demo

<script type="application/javascript">
    /**
     * Fetch API 基本用法
     */
    fetch('http://localhost:8088/saymo').then(function (data) {
        //text()方法属于fetchAPI的一部分，它返回一份Promise实例对象，用于获取后台返回的数据
        return data.text();
    }).then(function (data) {
        alert(data);
    })
</script>
fetch请求参数
  1. 常用配置选项
method（String）：HTTP请求方法，默认为GET（GET、POST、PUT、DELETE）

body（String）：HTTP的请求参数

headers（Object）：HTTP的请求头，默认为{}

  1. get请求方式的参数传递

常规

<script>
    fetch('http://localhost:8088/sayHi?name="莫逸风',{
        method:'get'
    }).then(function (data) {
        return data.text();
    }).then(function (data) {
        alert(data);
    });
</script>

restful形式

  1. post请求方式的参数传递

参数form表单形式

fetch('http://localhost:8088/login',{
        method:'post',
        body:,
        headers:{
            'Content-Type':'application/x-www-form-urlencoded',
        }
    }).then(function (data) {
        return data.text();
    }).then(function (data) {
        alert(data);
    })

参数json表单形式

fetch('http://localhost:8088/login',{
        method:'post',
        body:JSON.stringify({
            name:'莫逸风',
            pass:'1234',
        }),
        headers:{
            'Content-Type':'application/json',
        }
    }).then(function (data) {
        return data.text();
    }).then(function (data) {
        alert(data);
    });
fetch响应结果
text()：将返回体处理成字符串类型

json()：返回结果和JSON.parse(responseText)一样

fetch('http://localhost:8088/sayhi?name=莫逸风',{
        method:'get'
    }).then(function (data) {
        return data.json();
    }).then(function (data) {
        alert(data);
    });

4. axios进行接口调用

axios（官网：https://github.com/axios/axios）是一个基于Promise用于浏览器和node.js的HTTP客户端

中文说明文档

它具有一下特征：

  • 支持浏览器和node.js
  • 支持promise
  • 能拦截请求和相应
  • 自动转换JSON数据
axios基本用法
//去github下载文件，此js位于axios-master\dist
<script src="axios.js"></script>
<script>
    axios.get('http://localhost:8088/saymo').then(function (ret) {
        //data属性是固定的用法,用于获取后台的实际数据
        alert(ret.data)
    })
</script>
axios的常用API（参数传递）
  • get：查询数据
  • post：添加数据
  • put：修改数据
  • delete：删除数据
  1. get传递参数

通过URL传递参数

axios.get('http://localhost:8088/sayhi?name=莫逸风').then(function (ret) {
        alert(ret.data)
    })

restful风格接口

通过params选项传递参数

axios.get('http://localhost:8088/sayhi',{
        params:{
            name:"莫逸风"
        }
    }).then(function (ret) {
        //data属性是固定的用法,用于获取后台的实际数据
        alert(ret.data)
    })
  1. POST传递参数

通过对象传递参数（默认传递的是json格式的数据）

axios.post('http://localhost:8088/login',{
        name:"莫逸风",
        pass:"1234",
    }).then(function (ret) {
        //data属性是固定的用法,用于获取后台的实际数据
        alert(ret.data)
    })

通过URLSearchParams传递参数（application/x-www-form-urlencoded）

var param = new URLSearchParams();
param.append('name','莫逸风');
param.append('pass','12345');
    axios.post('http://localhost:8088/login',param).then(function (ret) {
        //data属性是固定的用法,用于获取后台的实际数据
        alert(ret.data)
    })
  1. axios的响应结果
  • data：实际响应回来的数据
  • headers：响应头信息
  • status：响应状态码
  • statusText：响应状态信息
axios.post('http://localhost:8088/login',param).then(function(ret){
    console.log(ret);//所有数据都包含在此对象中
    //对于json形式的响应数据可以直接获取，不需要转换
    alert(ret.data.name);
})
  1. axios的全局配置
axios.defaults.timeout = 3000;  //超时时间
//默认地址，再写请求的时候只需要写后面的路由就行了
axios.defaults.baseURL = 'http://localhost:3000/app';
axios.defaults.headers['mytoken']='aqwerwqwerqwer2ewrwe23eresdff23'//设置请求头

demo

//配置请求的基准URL地址
axios.defaults.baseURL = 'http://localhost:8088/';
axios.get('sayhi?name=莫逸风').then(function (ret) {
    //data属性是固定的用法,用于获取后台的实际数据
    alert(ret.data)
})
//注意，添加请求头跨域需要后端设置AllowedHeader
//修改请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
  1. axios拦截器

请求拦截器

在请求发出之前设置一些信息

axios.interceptors.request.use(function (config) {
        config.baseURL = "http://localhost:8088/";
        alert(config.url);
        return config;
    },function (err) {
        console.log(err);
    })

    axios.get('sayhi?name=莫逸风').then(function (ret) {
        //data属性是固定的用法,用于获取后台的实际数据
        alert(ret.data)
    })

响应拦截器（拦截器放到请求之上）

在获取数据之前对数据做一些加工处理

axios.interceptors.response.use(function (res) {
        var data = res.data;
        return data;
    },function (err) {
        console.log(err);
    })

    axios.get('sayhi?name=莫逸风').then(function (res) {
        //data属性是固定的用法,用于获取后台的实际数据
        alert(res)
    })

5. asyns/await接口调用

async/await的基本用法
  • async/await是ES7引入的语法，可以更加方便的进行异步操作
  • async关键字用于函数上（async函数的返回值是Promise实例对象）
  • await关键字用于async函数中（await可以得到异步的结果）

await后跟一个Promise对象实现异步任务，async返回值是一个Promise对象

<script src="axios.js"></script>
<script>
    axios.defaults.baseURL = 'http://localhost:8088/';
    async function queryData(){
        var ret = await axios.get('saymo');
        //alert(ret.data);
        return ret.data;
    }
    queryData().then(function (data) {
        alert(data);
    });
</script>
多个异步请求的场景

不需要.then来保证顺序。

<script>
    axios.defaults.baseURL = 'http://localhost:8088/';
    async function queryData(){
        var ret = await axios.get('saymo');
        alert(ret.data);
        var ret1 = await axios.get('sayyi');
        alert(ret1.data);
        var ret2 = await axios.get('sayfeng');
        return ret2.data;
    }
    queryData().then(function (data) {
        alert(data);
    });
</script>
文章标签：
Java
JavaScript
前端开发
API
数据格式
JSON
关键词：
入门vue VUE.js
入门VUE.js
VUE.js入门
vue交互VUE.js
VUE.js前后端交互
莫逸风
目录
相关文章
大树营养快线
|
5天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式，可以实现组件的按需加载，减少资源浪费，提高应用的响应速度和用户体验。在实际应用中，需要根据具体情况选择合适的懒加载方式，并结合性能优化的其他措施，以打造更高效、更优质的 Vue 应用。
大树营养快线
29 4
dufadayang
|
4天前
|
JavaScript
如何在 Vue 中使用具名插槽
【10月更文挑战第25天】通过使用具名插槽，你可以更好地组织和定制组件的模板结构，使组件更具灵活性和可复用性。同时，具名插槽也有助于提高代码的可读性和可维护性。
dufadayang
10 2
dufadayang
|
4天前
|
JavaScript
Vue 中的插槽
【10月更文挑战第25天】插槽的使用可以大大提高组件的复用性和灵活性，使你能够根据具体需求在组件中插入不同的内容，同时保持组件的结构和样式的一致性。
dufadayang
10 2
我是快乐的嘟嘟
|
4天前
|
前端开发 JavaScript 容器
在 vite+vue 中使用@originjs/vite-plugin-federation 模块联邦
【10月更文挑战第25天】模块联邦是一种强大的技术，它允许将不同的微前端模块组合在一起，形成一个统一的应用。在 vite+vue 项目中，使用@originjs/vite-plugin-federation 模块联邦可以实现高效的模块共享和组合。通过本文的介绍，相信你已经了解了如何在 vite+vue 项目中使用@originjs/vite-plugin-federation 模块联邦，包括安装、配置和使用等方面。在实际开发中，你可以根据自己的需求和项目的特点，灵活地使用模块联邦，提高项目的可维护性和扩展性。
我是快乐的嘟嘟
14 1
大树营养快线
|
5天前
|
JavaScript 前端开发 UED
vue 提高 tree shaking 的效果
【10月更文挑战第23天】提高 Vue 中 Tree shaking 的效果需要综合考虑多个因素，包括模块的导出和引用方式、打包工具配置、代码结构等。通过不断地优化和调整，可以最大限度地发挥 Tree shaking 的优势，为 Vue 项目带来更好的性能和用户体验。
大树营养快线
10 2
大树营养快线
|
5天前
|
缓存 JavaScript UED
Vue 中异步加载模块的方式
【10月更文挑战第23天】这些异步加载模块的方式各有特点和适用场景，可以根据项目的需求和架构选择合适的方法来实现模块的异步加载，以提高应用的性能和用户体验
大树营养快线
10 1
大树营养快线
|
5天前
|
JavaScript 测试技术 UED
解决 Vue 项目中 Tree shaking 无法去除某些模块
【10月更文挑战第23天】解决 Vue 项目中 Tree shaking 无法去除某些模块的问题需要综合考虑多种因素，通过仔细分析、排查和优化，逐步提高 Tree shaking 的效果，为项目带来更好的性能和用户体验。同时，持续关注和学习相关技术的发展，不断探索新的解决方案，以适应不断变化的项目需求。
大树营养快线
15 1
我是快乐的嘟嘟
|
6天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具，正确配置和运行预渲染操作，结合其他 SEO 策略，可以实现更好的搜索引擎优化效果。同时，需要不断地监控和优化预渲染效果，以适应不断变化的搜索引擎环境和用户需求。
我是快乐的嘟嘟
103 63
德国都芳最好
|
9天前
|
JavaScript
Vue 指令速查表
【10月更文挑战第12天】Vue 指令速查表
德国都芳最好
30 16
dufadayang
|
6天前
|
缓存 JavaScript 搜索推荐
Vue SSR（服务端渲染）预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制，实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展，Vue SSR 预渲染技术也将不断完善和创新，以适应不断变化的互联网环境和用户需求。
dufadayang
24 9

热门文章

最新文章

  • 1
    vite 如何做到让 vue 本地开发更快速？
  • 2
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 3
    前端常见Vue2.0面试题
  • 4
    Nginx - 同一域名配置多个 Vue 项目（支持Webpack、Uniapp）
  • 5
    【IntelliJ IDEA】idea支持vue文件，设置对vue的支持
  • 6
    VUE element-ui 之table表格勾选复选框动态带出（将某列的值赋值给指定列）对应列的数据
  • 7
    自制简单的range（Vue）
  • 8
    探秘 Vue 数据绑定：为何 data 必须是函数而非对象？
  • 9
    Vue3的MVVM简介详情
  • 10
    你知道 Vue scoped 原理吗？这波你在第几层？
  • 1
    vue(1)，小白看完都会了
    40
  • 2
    深入理解Vue.js中的nextTick：实现异步更新的奥秘
    138
  • 3
    Vue中避免滥用this去读取data中数据
    39
  • 4
    vue3服务端渲染警告解决----DefinePlugin
    102
  • 5
    vue中使用pinia及持久化
    53
  • 6
    Vue3与Vue2：对比分析与迁移指南
    377
  • 7
    双向数据绑定：Vue.js的魔法背后
    53
  • 8
    Vue class和style绑定：动态美化你的组件
    74
  • 9
    Vue 监听器：让你的应用实时响应变化
    187
  • 10
    vue3封装面包屑
    140

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门与实战
  • React 入门教程开发文档

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月