Vue之前后台交互---kalrry
一、接口调用方式
- 原生ajax
- 基于jQuery的ajax
- fetch
- axios
二、前置概念Promise
1. 概念：
Promise是异步编程的一种解决方案，从语法上看，Promise是一个对象，从它可以获取异步操作的消息
2. 优点：
- 可以避免多层异步调用嵌套问题（回调地狱）
- Promise对象提供了简介的API，使得异步操作更加容易
3. 基本用法：
- 实例化Promise对象，构造函数中传递函数，该函数用于处理异步任务
- resolve和reject两个参数用于处理成功和失败两种情况，并通过then函数获取处理结果
例子
var p=new Promise(function(resolve,reject){
//成功调用resolve()
//失败调用reject
})
p.then(function(res){
//从resolve得到正常结果
},function(req){
//从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)
})
三、发送Ajax请求(于Promise)
1. 基于Promise发送Ajax单次请求
// 基于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文件
{
"id":"01",
"name":"张三"
}
2. 发送多次Ajax请求
例子 ：
queryData(url)
.then(function(data){
return queryData()
})
.then(function(data){
return queryData(url)
})
...
;
// url可以不相同
3. then参数中的函数返回值
- 返回Promise实例对象，返回的该实例对象会调用下一个then
- 返回普通值，返回的普通值会之间传递给下一个then，通过then参数中函数的参数接收该值
4. 实例方法
- p.then() 得到异步操作的正确结果
- p.catch() 获取异常信息
- p.finally() 成功与否都会执行
例子：
queryData(url)
.then(function(data){
})
.catch(function(data){
})
.finally(function(data){
})
5. 对象方法
- Promise.all() 并发处理多个异步任务，所有任务都执行完成才能得到结果(所有异步任务的结果集)
- Promise.race() 并发处理多个异步任务，只要有一个任务完成就能得到结果（最先返回的那个结果）
- 例子：
Promise.all([p1,p2,p3]).then(data=>{
})
Promise.race([p1,p2,p3]).then(data=>{
})
四、fetch（ES6新增）
特点：
- 更加简单的数据获取方式，功能更强大，更灵活，可以看作是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实例对象，用于获取后台返回的数据
1. fetch请求参数
- method(String) ：HTTP请求方法，默认为get（get、post、put、delete）
- body(String)：HTTP的请求参数
- headers(Object)：HTTP请求头，默认为{}
2. 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) //返回请求结果
})
3. 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) //返回请求结果
})
4. 响应数据格式：
- text()：返回字符串格式
- json()：返回json格式
五、axios发送数据请求
特点：
- 支持浏览器和node.js
- 支持Promise
- 能来拦截请求和响应
- 自动转换JSON数据
使用:
1、cdn引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
2、在vue中使用
1. 引入
//局部使用
import axios from 'axios'
axios.get();
//全局使用，在main.js中注册
import axios from 'axios'
Vue.prototype.$axios = axios;
this.$axios.get(); //使用
2. 基本用法
//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)
})
3. 请求拦截器
请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易。
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么，例如在请求头中加入token
config.headers.Authorization = window.sessionStorage.getItem('token')
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
4. 响应拦截器
响应拦截器的作用是在接收到响应后进行一些操作，例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页。
axios.interceptors.response.use(function (response) {
// 在接收响应做些什么，例如跳转到登录页
......
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
5. 移除拦截器
var myInterceptor = axios.interceptors.request.use(function () {
/*...*/});
axios.interceptors.request.eject(myInterceptor);
6. 为axios实例添加拦截器
axios.interceptors.request.use(function (config) {
/*...*/});
7. 响应结果的主要属性
- data：实际响应回来的数据
- headers：响应头信息
- status：响应状态码
- statusText：响应状态信息
8. axios的全局配置
- axios.default.timeout = 3000 设置超时事件
- axios.default.baseURL = … 设置默认请求地址
- axios.default.headers[‘value’] = … 设置请求头