vue(21):前后端交互(获取后台数据) |
您所在的位置:网站首页 › 前端显示后端的数据有哪些类型 › vue(21):前后端交互(获取后台数据) |
接口调用方式 原生ajax基于jQuery的ajaxfetchaxios Promise概述 Promise时异步编程的一种解决方案,从语法上将,Promise是一个对象,从它可以获取异步操作的消息 优点: 可以避免多层异步调用嵌套问题(回调地狱)Promise对象提供了简介的API,使得异步操作更加容易基本用法: 实例化Promise对象,构造函数中传递函数,该函数用于处理异步任务resolve和reject两个参数用于处理成功和失败两种情况,并通过then函数获取处理结果格式: var p=new Promise(function(resolve,reject){ //成功调用resolve() //失败调用reject }) p.then(function(ret){ //从resolve得到正常结果 },function(ret){ //从reject得到错误信息 })实例:基本使用格式 var p = new Promise(function(resolve, reject) { setTimeout(function() { var flog = true if (flog) { //正常情况 resolve('Hello') } else { //异常情况 reject('错误') } }, 100) }) p.then(function(ret) { console.log(ret) }, function(ret) { console.log(ret) })实例:基于Promise发送Ajax请求 function queryData(url) { var p = new Promise(function(resolve, reject) { //ajax var xml = new XMLHttpRequest(); xml.onreadystatechange = function() { if (xml.readyState != 4) return; if (xml.readyState == 4 && xml.status == 200) { resolve(xml.responseText) } else { reject('服务器错误') } } xml.open('GET', url); xml.send(null) }) return p; } queryData('data.json').then(function(data) { console.log(data) }, function(info) { console.log(info) })data.json是我在当前目录下写的一个json文件 url可以不相同 then参数中的函数返回值: 返回Promise实例对象,返回的该实例对象会调用下一个then返回普通值,返回的普通值会之间传递给下一个then,通过then参数中函数的参数接收该值实例方法 p.then() 得到异步操作的正确结果p.catch() 获取异常信息p.finally() 成功与否都会执行结构: queryData(url) .then(function(data){ }) .catch(function(data){ }) .finally(function(data){ })对象方法 Promise.all() 并发处理多个异步任务,所有任务都执行完成才能得到结果(所有异步任务的结果集)Promise.race() 并发处理多个异步任务,只要有一个任务完成就能得到结果(最先返回的那个结果)结构: Promise.all([p1,p2,p3]).then(data=>{ }) Promise.race([p1,p2,p3]).then(data=>{ }) fetch特点: 更加简单的数据获取方式,功能更强大,更灵活,可以看作是Ajax的升级版基于Promise实现语法结构 fetch(url).then(fn1) .then(fn2) .... .catch(fn)实例 fetch('data.json').then(data => { return data.text() //固定格式 }).then(data => { console.log(data) //返回请求结果 })注:text()方式是fetchApI中的一部分,它返回一个Promise实例对象,用于获取后台返回的数据 fetch请求参数 method(String) :HTTP请求方法,默认为get(get、post、put、delete)body(String):HTTP的请求参数headers(Object):HTTP请求头,默认为{}get请求参数 //推荐 fetch('/abc?id=5'{ method:'get' }).then(data => { return data.text() //固定格式 }).then(data => { console.log(data) //返回请求结果 }) //或 fetch('/abc/5'{ method:'get' }).then(data => { return data.text() //固定格式 }).then(data => { console.log(data) //返回请求结果 })post请求参数 fetch('/abc'{ method:'post', //必须 body:'name=张三&id=5', //必须 headers:{ 'Content-Type':'application/x-www-form-urlencoded' //必须,指定返回的格式 } }).then(data => { return data.text() //固定格式 }).then(data => { console.log(data) //返回请求结果 })响应数据格式: text():返回字符串格式json():返回json格式 axios这篇文章可以看一下:axios的基本使用 特点: 支持浏览器和node.js支持Promise能来拦截请求和响应自动转换JSON数据cdn 在vue中使用 //局部使用 import axios from 'axios' axios.get(); //全局使用,在main.js中注册 import axios from 'axios' Vue.prototype.$axios = axios; this.$axios.get(); //使用基本用法 //get:查询数据 axios.get(url).then(ret=>{ //data属性名称是固定的,用于获取后台响应的数据 console.log(ret.data) }) //get传参 axios.get('abc?id=5').then(ret=>{ //data属性名称是固定的,用于获取后台响应的数据 console.log(ret.data) }) axios.get('abc',{ params:{ id:123 } }).then(ret=>{ //data属性名称是固定的,用于获取后台响应的数据 console.log(ret.data) }) //post:添加数据 axios.post('abc',{ //默认传递的是json格式的数据 id:5, name:'张三' }).then(ret=>{ //data属性名称是固定的,用于获取后台响应的数据 console.log(ret.data) }) var params=new URLSearchParams(); //用于提交表单 params.append(key1,value1); params.append(key2,value2); axios.post('/abc',params).then(ret=>{ }) //put:修改数据 axios.put('abc',{ //默认传递的是json格式的数据 id:5, name:'张三' }).then(ret=>{ //data属性名称是固定的,用于获取后台响应的数据 console.log(ret.data) }) //delete:删除数据 axios.delete('abc?id=5').then(ret=>{ //data属性名称是固定的,用于获取后台响应的数据 console.log(ret.data) }) axios.delete('abc',{ params:{ id:123 } }).then(ret=>{ //data属性名称是固定的,用于获取后台响应的数据 console.log(ret.data) })请求拦截器 请求拦截器的作用是在请求发送前进行一些操作,例如在每个请求体里加上token,统一做了处理如果以后要改也非常容易。 axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么,例如在请求头中加入token config.headers.Authorization = window.sessionStorage.getItem('token') return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); });响应拦截器 响应拦截器的作用是在接收到响应后进行一些操作,例如在服务器返回登录状态失效,需要重新登录的时候,跳转到登录页。 axios.interceptors.response.use(function (response) { // 在接收响应做些什么,例如跳转到登录页 ...... return response; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); });移除拦截器 var myInterceptor = axios.interceptors.request.use(function () {/*...*/}); axios.interceptors.request.eject(myInterceptor);为axios实例添加拦截器 axios.interceptors.request.use(function (config) {/*...*/});响应结果的主要属性 data:实际响应回来的数据headers:响应头信息status:响应状态码statusText:响应状态信息axios的全局配置 axios.default.timeout = 3000 设置超时事件axios.default.baseURL = .... 设置默认请求地址axios.default.headers['value'] = ..... 设置请求头 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |