vue（21）：前后端交互（获取后台数据）

您所在的位置：网站首页 › 数据是如何获取的 › vue（21）：前后端交互（获取后台数据）

vue（21）：前后端交互（获取后台数据）

2024-07-10 04:08| 来源: 网络整理| 查看: 265

接口调用方式

原生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请求

data.json是我在当前目录下写的一个json文件在这里插入图片描述发送多次Ajax请求格式：

queryData(url) .then(function(data){ return queryData() }) .then(function(data){ return queryData(url) }) ... ;

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'] = ..... 设置请求头

【本文地址】

vue（21）：前后端交互（获取后台数据）

vue（21）：前后端交互（获取后台数据）

今日新闻

推荐新闻