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

接口调用方式

原生ajax
基于jQuery的ajax
fetch
axios

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文件

文章图片

发送多次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实例对象，用于获取后台返回的数据
【vue（21）（前后端交互（获取后台数据））】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

="https://unpkg.com/axios/dist/axios.min.js">

在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); });

移除拦截器