Vue前后端路由

前后端交互

1.接口调用方式

• 原生ajax
• 基于jquery的ajax
• fetch
• axios

url地址

• 传统形式的url——schema://host:port/path?query#fragment

  • scheme：协议，如http，https，ftp
  • host：域名或IP地址
  • port：端口
  • path：路径
  • query：查询参数，如uname=lisi&age=12
  • fragment：锚点（hash），用于定位页面的某个位置

• Restful形式的url——http请求方式

  • GET 查询
  • POST 添加
  • PUT 修改
  • DELETE 删除

2.异步调用

• 异步效果分析

  • 定时任务，setTimeout，setInterval
  • ajax

var ret ='---'
$.ajax{
    // 后台接口express写的
    url:'http://localhost:3000/data',
    success:function(data){
        ret = data;
        console.log(ret); //data值
    }
}
console.log(ret) //--- ajax异步调用

• 事件函数

• 多次异步调用的依赖分析

  • 多次异步调用的结果顺序不确定，与写的顺序无关
  • 异步调用结果如果存在依赖需要嵌套===》回调地狱

3.promise

异步编程的一种解决方案，是一个对象。

好处：

可以避免多层异步调用嵌套问题（回调函数）

Promise对象提供了简洁的API，使控制异步操作更加容易

①基本用法

• 实例化Promise对象，构造函数中传递函数，该函数体内实现异步任务

• resolve和reject两个参数用于处理成功和失败两种情况，并通过p.then获取处理结果

var p = new Promise(function(resolve, reject){
    // 这里用于实现异步任务
    setTimeout(function(){
        var flag = true;
        if(flag){
            // 正常情况
            resolve('hello');
        }else{
            // 异常情况
            reject('出错了');
        }
    },100);
});

p.then(function(data){
    // 从resolve得到正常结果
},funtion(info){
       // 从reject得到错误信息
})

②基于Promise处理Ajax请求

function queryData(url){
    var p = new Promise(function(resolve, reject){
        var xhr = new XMLHttpRequest();
        
        xhr.onreadystatechange=function(){
            if(xhr.readyState!=4) return;
            else(xhr.readyState ==4 && xhr.status == 200){
                // 处理正常情况
                resolve(xhr.responseText);
            }else{
                // 处理异常情况
                reject('服务器错误');
            }
        };
        
        // 准备发送前参数 (发送方式,url地址,异步)
        xhr.open('get',url);
        
        xhr.send(null);
    });
    return p;
}

queryData('http://localhost:3000/data')
    .then(function(data){
        // 从resolve得到正常结果
    },funtion(info){
        // 从reject得到错误信息                                         
    });

发送多次ajax请求并且保证顺序

queryData('http://localhost:3000/data')
    .then(function(data){
        // 从resolve得到正常结果
    	return queryData('http://localhost:3000/data1');
    })
    .then(function(data){
    	// 从resolve得到正常结果
    	return queryData('http://localhost:3000/data2');
    })
    .then(function(data){
    	// 从resolve得到正常结果
	  });

then参数中的函数返回值

• 返回新的Promise实例对象

  返回的该实例对象会调用下一个then

• 返回普通值

  返回的普通值会直接传递给下一个then，通过then参数中函数的参数接收该值

  （产生一个默认promise对象，从而保证下一个then可以链式操作）

③实例方法

• p.then(参数1) 得到异步任务的正确结果
• p.catch()获取异常信息
• p.finally() 成功与否都会执行

p.then(参数1，参数2) 异步任务的结果（正确和异常结果）

④对象方法

Promise.all() 并发处理多个异步任务，所有任务都执行完成才能得到结果

var p1 = queryData('http://localhost:3000/data1');
var p2 = queryData('http://localhost:3000/data2');
var p3 = queryData('http://localhost:3000/data3');
Promise.all([p1,p2,p3]).then(function(result){
    // 返回的result是数组,顺序和传入的对象一一对应
});

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

4.fetch

基于promise实现，更加简单

①基本使用

text()属于fetch API的一部分，返回一个Pormise实例对象，用于获取后台返回的数据

fetch('http://localhost:3000/data2').then(function(data){
    return data.text();
}).then(function(data){
    // 真实的数据
})

②请求参数

method(String)：http的请求方法，默认为get（get，post，put，delete）

body(String)：http的请求参数

headers(Object)：http的请求头，默认为{}

1️⃣get请求传递参数，delete类似

• 传统

fetch('http://localhost:3030/books?id=123',{
  method:'get'
}).then(function(data){
  return data.text()
}).then(function(data){
    console.log(data)
})

// 后台
app.get('/books',(req,res)=>{
    res.send('传统的URL传递参数'+req.query.id)
})

• restful

fetch('http://localhost:3030/books/456',{
    method:'get'
}).then(function(data){
    return data.text()
}).then(function(data){
    console.log(data)
})

// 后台
app.get('/books/:id',(req,res)=>{
    res.send('Restful形式的URL传递参数'+req.params.id)
})

2️⃣post请求

fetch('http://localhost:3030/books',{
    method:'post',
    body:'uname=lisi&pwd=123',
    headers:{
        'Content-Type':'application/x-www-form-urlencoded'
    }
}).then(function(data){
    return data.text()
}).then(function(data){
    console.log(data)
})

// 后台
app.post('/books',(req,res)=>{
    res.send('Post请求传递参数'+req.body.uname+'------'+req.body.pwd)
})

JSON形式的参数

fetch('http://localhost:3030/books',{
    method:'post',
    body:JSON.stringify({
        uanme:'张三',
        pwd:'123'
    }),
    headers:{
        'Content-Type':'application/json'
    }
}).then(function(data){
    return data.text()
}).then(function(data){
    console.log(data)
})

3️⃣put请求 修改参数

fetch('http://localhost:3030/books/123',{
    method:'put',
    body:JSON.stringify({
        uanme:'张三',
        pwd:'456'
    }),
    headers:{
        'Content-Type':'application/json'
    }
}).then(function(data){
    return data.text()
}).then(function(data){
    console.log(data)
})

// 后台
app.put('/books/:id',(req,res)=>{
    res.send('Put请求传递参数'+req.params.id+'------'+req.body.uname+'------'+req.body.pwd)
})

③响应结果

text() 将返回体处理成字符串类型

json() 返回结果和JSON.parse(responseText)一样

fetch('http://localhost:3000/json',{
}).then(function(data){
    return data.json()
}).then(function(data){
    console.log(data)
})

// 后台
app.get('/json',(res,req)=>{
    res.json({
        uname:'lisi',
        age:12,
        gender:'male'
    })
})

5.axios

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

特性：

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

①基本使用

data属性是固定的用法，用于获取后台的实际数据

axios.get('http://localhost:3000/data').then(function(ret){
    console.log(ret.data)
})

②常用API

1️⃣get，delete类似

• 通过url传递参数：url?id=123

  • 传统

axios.get('http://localhost:3000/axios?id=123').then(function(ret){
    console.log(ret.data)
})

// 后台
app.get('/axios',(req,res)=>{
    res.send('axios get传递参数'+req.query.id)
})

• Restful

axios.get('http://localhost:3000/123').then(function(ret){
    console.log(ret.data)
})

// 后台
app.get('/axios/:id',(req,res)=>{
    res.send('axios get(Restful)传递参数'+req.params.id)
})

• 通过params选项传递参数：

axios.get('http://localhost:3000/axios',{
    params:{
        id:789
    }
}).then(function(ret){
    console.log(ret.data)
})
// 后台
app.get('/axios',(req,res)=>{
    res.send('axios get传递参数'+req.query.id)
})

2️⃣post，put类似

• 通过选项传递参数（默认传递json格式的数据）

axios.post('http://localhost:3000/axios',{
    uname:'lisi',    
    pwd:'789'
}).then(function(ret){
    console.log(ret.data)
})
// 后台
app.post('/axios',(req,res)=>{
    res.send('axios post传递参数'+req.body.uname+'---'+req.body.pwd)
})

• 通过URLSearchParams传递参数（表单形式application/x-www-form-urlencoded）

var params = new URLSearchParams();
params.append('uname','zhangsan');
params.append('pwd','111');

axios.post('http://localhost:3000/axios',params).then(function(ret){
    console.log(ret.data)
}) 

③响应结果

• 响应结果的主要属性

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

• 全局配置

axios.defaults.timeout=3000; // 超时时间
axios.defaults.baseURL='http://localhost:3000/'; // 默认地址
axios.defaults.headers['mytoken']='aqwererrw123dad'; // 设置请求头，跨域需要后台支持。

④拦截器

• 请求拦截器

  

axios.interceptors.request.use(function(config){
    // 请求发出前进行信息设置
    config.headers.mytoken = 'nihao';
    return config;
},function(err){
    // 处理响应的错误信息
    console.log(err);
})

• 响应拦截器

  

axios.interceptors.response.use(function(res){
    // 获取数据之前对数据进行加工处理
    console.log(res)
    var data = res.data;
    return data;
},function(err){
    // 处理响应的错误信息
    console.log(err);
})

6.async/await

①基本用法

• async/await是ES8引入的新语法，方便异步操作
• async用于函数上，async函数的返回值是Promise实例对象
• await用于async函数中，await可以得到异步的结果

async function queryData(id){
    const ret = await axios.get('/data');
    return ret.data;
}
queryData.then(data=>console.log(data))

②多个异步请求

async function queryData(id){
    const info = await axios.get('/async1');
    const ret = await axios.get('/async2?info='+info.data);
    return ret.data;
}
queryData.then(data=>console.log(data))