项目中一般结合async/await语法使用axios调用接口 1. 接口调用方式 原生ajax、基于jQuery的ajax、fetch、axios 2. 传统的URL 格式：schema://host:port/path?query#fragment 3. Restful形式的URL HTTP请求方式 JS中常见的异步调用：定时任务、ajax、事件函数 Promise是异步编程的一种解决方案，从语法上讲，Promise是一个对象，从它可以获取异步操作的消息。 使用Promise主要有以下好处： 实例化Promise对象，构造函数中传递函数，该函数中用于处理异步任务。 resolve和reject两个（方法）参数用于处理成功和失败两种情况，并通过p.then获取处理结果。 返回该实例对象用于调用下一个then 返回的普通值会直接传递给下一个then，通过then函数中函数的参数接收该值（底层会对返回的普通值封装为一个Promise使得能够继续调用then） 上方调用方式会调用后端，产生跨域问题（解决方案回头仔细研究，先放一段代码(SpringBoot)） p.then() //得到异步任务的处理结果 demo Promise.all()并发处理多个异步任务，所有任务都执行完成才能得到结果 Promise.race()并发处理多个异步任务，只要有一个任务完成就能得到结果 demo 更加简单的数据获取方式，功能更强大、更灵活，可以看做是xhr的升级版 基于Promise实现 语法结构 基本用法 demo method（String）：HTTP请求方法，默认为GET（GET、POST、PUT、DELETE） body（String）：HTTP的请求参数 headers（Object）：HTTP的请求头，默认为{} 常规 restful形式 参数form表单形式 参数json表单形式 text()：将返回体处理成字符串类型 json()：返回结果和JSON.parse(responseText)一样 axios（官网：https://github.com/axios/axios）是一个基于Promise用于浏览器和node.js的HTTP客户端 它具有一下特征： 通过URL传递参数 restful风格接口 通过params选项传递参数 通过对象传递参数（默认传递的是json格式的数据） 通过URLSearchParams传递参数（application/x-www-form-urlencoded） demo 请求拦截器 在请求发出之前设置一些信息 响应拦截器（拦截器放到请求之上） 在获取数据之前对数据做一些加工处理 async/await是ES7引入的语法，可以更加方便的进行异步操作 async关键字用于函数上（async函数的返回值是Promise实例对象） await关键字用于async函数中（await可以得到异步的结果） await后跟一个Promise对象实现异步任务，async返回值是一个Promise对象 不需要.then来保证顺序。
Vue前后端交互
六、Vue前后端交互
1. 前后端交互模式
2. Promise的相关概念和用法
Promise基本用法
var p = new Promise(function(resolve,reject){ //成功时调用resolve() //失败时调用reject() }); p.then(function(ret){ //从resolve得到正常结果 },function(ret){ //从reject得到错误信息 }); then参数中的函数返回值
p.then(function(ret){ return new 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('https://localhost:8088/saymo').then( function (data) { alert(data); return getText('https://localhost:8088/sayyi'); },function (info) { alert(info); } ).then( function (data) { alert(data); return getText('https://localhost:8088/sayfeng') } ).then( function (data) { alert(data); } ); </script> 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("https://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
p.catch() //获取异常信息
p.finally() //成功与否都会执行（尚且不是正式标准）<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>
<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("https://localhost:8088/saymo"); var p2 = getText("https://localhost:8088/sayyi"); var p3 = getText("https://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进行接口调用
fetch基本用法
fetch(url).then(fn2) .then(fn3) ... .cach(fn) fetch('/abc').then(data=>{ return data.text(); }).then(ret=>{ //这里得到的才是最终的数据 console.log(ret); }) <script type="application/javascript"> /** * Fetch API 基本用法 */ fetch('https://localhost:8088/saymo').then(function (data) { //text()方法属于fetchAPI的一部分，它返回一份Promise实例对象，用于获取后台返回的数据 return data.text(); }).then(function (data) { alert(data); }) </script> fetch请求参数
<script> fetch('https://localhost:8088/sayHi?name="莫逸风',{ method:'get' }).then(function (data) { return data.text(); }).then(function (data) { alert(data); }); </script>
fetch('https://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); }) fetch('https://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响应结果
fetch('https://localhost:8088/sayhi?name=莫逸风',{ method:'get' }).then(function (data) { return data.json(); }).then(function (data) { alert(data); }); 4. axios进行接口调用
axios基本用法
//去github下载文件，此js位于axios-masterdist <script src="axios.js"></script> <script> axios.get('https://localhost:8088/saymo').then(function (ret) { //data属性是固定的用法,用于获取后台的实际数据 alert(ret.data) }) </script> axios的常用API（参数传递）
axios.get('https://localhost:8088/sayhi?name=莫逸风').then(function (ret) { alert(ret.data) }) axios.get('https://localhost:8088/sayhi',{ params:{ name:"莫逸风" } }).then(function (ret) { //data属性是固定的用法,用于获取后台的实际数据 alert(ret.data) })
axios.post('https://localhost:8088/login',{ name:"莫逸风", pass:"1234", }).then(function (ret) { //data属性是固定的用法,用于获取后台的实际数据 alert(ret.data) }) var param = new URLSearchParams(); param.append('name','莫逸风'); param.append('pass','12345'); axios.post('https://localhost:8088/login',param).then(function (ret) { //data属性是固定的用法,用于获取后台的实际数据 alert(ret.data) })
axios.post('https://localhost:8088/login',param).then(function(ret){ console.log(ret);//所有数据都包含在此对象中 //对于json形式的响应数据可以直接获取，不需要转换 alert(ret.data.name); })
axios.defaults.timeout = 3000; //超时时间 //默认地址，再写请求的时候只需要写后面的路由就行了 axios.defaults.baseURL = 'https://localhost:3000/app'; axios.defaults.headers['mytoken']='aqwerwqwerqwer2ewrwe23eresdff23'//设置请求头 //配置请求的基准URL地址 axios.defaults.baseURL = 'https://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';
axios.interceptors.request.use(function (config) { config.baseURL = "https://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的基本用法
<script src="axios.js"></script> <script> axios.defaults.baseURL = 'https://localhost:8088/'; async function queryData(){ var ret = await axios.get('saymo'); //alert(ret.data); return ret.data; } queryData().then(function (data) { alert(data); }); </script> 多个异步请求的场景
<script> axios.defaults.baseURL = 'https://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>
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
3273