Vue学习笔记3--前后端交互

前后端交互

完整的基础篇笔记PDF下载，完全手打有用的话请给个赞呗Thanks♪(･ω･)ﾉ

概述

接口调用模式

• 原生ajax
• jQuery的ajax
• fetch
• axios

Promise用法

js异步调用例子

• 定时任务
• ajax
• 事件函数

回调地狱问题

Ajax的Promise处理方式

function queryData(url){
    var p = new Promise(function(resolve,reject){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState != 4)return;
            if(xhr.status == 200){
                //正常情况
                resolve(xhr.responseText);
            }else{
                //异常情况
                reject('服务器故障！');
            }
        };
        xhr.open('get',url);
        xhr.send(null);
    });
    return p;   
}
//调用
queryData("http://localhost:8080/test/all")
    .then(function(data){
    //正常情况
    console.log(data);
},function(info){
    //异常情况
    console.log(info);
});

解决回调地狱问题

queryData(url1)
    .then(function(data){
    return queryData(url2);
	})
    .then(function(data){
    return queryData(url3);
	})
    .then(function(data){
    return queryData(url4);
	});

then函数返回值：

• 返回Promise对象：返回该实例对象调用下一个then
• 返回普通值：返回的普通值直接传递给下一个then，通过then参数中函数的参数接收该值

Promise常用API

实例方法：

• p.then()：正常信息
• p.catch()：异常信息
• p.finally()：最后都执行

对象方法：

• Promise.all()：并发执行多个异步任务，所有任务执行完成才能得到结果
• Promise.race()：并发处理多个异步任务，只要有一个任务完成就能得到结果

Promise.all([p1,p2,p3]).then(result=> {
	console.log(result)
});

Promise.race([p1,p2,p3]).then(result=> {
	console.log(result)
});

fetch用法（原生）

特性

• 简洁、强大、灵活、xhr的升级
• 基于Promise实现

语法

fetch(url).then(fn2)
		  .then(fn3)
		  ...
          .catch(fn)

demo

fetch('http://localhost:8080/test/all').then(result=> {
           //通过fetch的text（）方法返回一个Promise对象在下一个then中获取返回数据
           return result.text();
       }).then(data =>{
           console.log(data);
       })

fetch请求参数

常用配置项：

• method：请求方式，String类型
• body：请求参数
• headers：请求头，默认{}，object类型

fetch(url,{
    method: 'post',
    body: JSON.stringify({
        uname: 'hhh',
        pwd: '123456'
    }),
    headers: {
        'Content-Type' : 'application/json'
    }
}).then(fn2)
.then(fn3)
...
.catch(fn)

fetch响应结果

格式

• text(): 将返回体处理为字符串类型
• json(): 将返回体处理为json类型

axios用法（第三方）

基于Promise用于浏览器和node.js 的HTTP客户端

特性

• 支持浏览器和node.js
• 支持Promise
• 能拦截请求和响应
• 自动装换JSON数据

基本用法

 axios.get(url,params)
       .then(res => {
           console.log(res.data)
       })
       .catch(err => {
           console.error(err); 
       })

demo

axios.get('http://localhost:8080/test/all')
       .then(res => {
           console.log(res.data)
       })
       .catch(err => {
           console.error(err); 
       })

常用API

• get
• post
• put
• delete

响应结果

主要属性

• data：实际响应数据
• headers：响应头信息
• status：想应状态码
• statusText：响应状态信息

全局配置

• 超时时间

  axios.defaults.timeout=3000;
  

• 默认(基本)地址

  axios.defaults.baseURL='http://localhost:8080/api'
  

• 设置请求头

  axios.defaults.headers['myToken'] = 'fsa2er3dst4';
  

拦截器

请求拦截器

基本用法

axios.interceptors.request.use(config => {
        // 请求前做一些事情
        return config;
        },error => {
        // 请求出错做的事情
        return Promise.reject(error);
        });

响应拦截器

基本用法

axios.interceptors.response.use(response => {
        // 获得响应时做一些数据
        return response;
        },error => {
        // 响应出错的时候做一些事情
        return Promise.reject(error);
        });

async/await用法

基本用法

• async/await是ES7引入的新语法，更加方便异步操作
• async 关键字用于函数上（async 函数的返回值是Promise）
• await 关键字用于async 函数中（await 可以得到异步的结果）

 async function queryData() {
     var ret = await axios.get('http://localhost:8080/test/all');
     return ret;
 }

queryData().then(ret => {
    console.log(ret.data)
})

处理多个异步请求

async function queryData() {
    var info = await axios.get('http://localhost:8080/test/all');
    var ret = await axios.get('http://localhost:8080/test/query?id='+ 										info.data[0].id);
    return ret;
}

queryData().then(ret => {
    console.log(ret.data)
})