Vue前端交互

前言

---

1、接口调用方式

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

2、URL地址格式
Restful形式的URL

• HTTP 请求方式
• GET 查询
• POST 添加
• PUT 修改
• DELETE 删除

3、Promise 概述

• Promise 是异步编程的一种解决方案，从语法上讲，Promise 是一个对象，从它可以获取异步操作的消息
• 使用Promise 的好处
  1.可以避免多层异步调用嵌套问题（回调地狱）
  2.Promise 对象提供了简介API，使得控制异步操作更加容易

4、Promise 的基本用法
实例化Promise 对象，构造函数中传递函数，该函数中用于处理异步任务
resolve和reject两个参数用于处理成功和失败两种情况，并通过p.then获取处理结果

var p=new Promise (function(resolve,reject){
    //成功时调用 resolve（）
    //失败时调用reject ()
});
p.then(function(ret){
    //从resolve得到正常结果
},function(ret){
//从reject得到错误信息    
});

5、基于Promise 处理Ajax请求
   1.处理原生Ajax

function queryData(){
    return 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','/data');
        xhr.send(null);
    })
}

   2.发送多次ajax请求

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

6、then参数中的函数返回值
   1.返回Promise 实例对象

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

   2.返回普通值

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

7、Promise 常用的API
   1.实例方法

•  p.then()得到异步任务的正确结果
•  p.catch()获取异常信息
•  p.finally()成功与否都会执行（尚且不是正式标准）

queryData（）
    .then(function(data){
        console.log(data);
    })
    .catch(function(data){
        console.log(data);
    })
    .finally(function(){
        console.log('finished');
    });    

   2.对象方法

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

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

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

8、接口调用-fatch用法

fetch概述
   1.基本特性

•  更加简单的数据获取方式，功能更加强大，更灵活，可以看做是xhr的升级版
•  基于Promise实现

   2.语法结构

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

   3.fetch的基本用法

fetch('/abc').then(data=>
    return data.text();
}).then(ret=>{
    //注意这里得到的才是最终的数据
    console.log(ret);
    });

   4.fetch请求参数

    1.GET请求方式的参数传递

fetch('/abc?id=123').then(data=>{
    return data.text();
}).then(ret=>)
    //注意这里得到的才是最终的数据
    console.log(ret);
});    

fetch('/abc/123',{
    method:'get'
}).then(data=>{
    return data.text();
}).then(ret=>){
    //这里得到的是最终数据
    console.log(ret);
});

    2.DELETE请求方式的参数传递

fetch('/abc/123',{
    method:'delete'
}).then(data=>{
    return data.text();
}).then(ret=>{
    //这里得到的是最终数据
    console.log(ret);
});

    3.POST请求方式的参数传递

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

    4.PUT请求方式的参数传递

fetch('bools/123',{
    mehod:'put',
    body:JSON.springify({
        uname:'lisi',
        age:12
    })
    headers:{
        'Content-Type':'applicaation/json',
    }
}).then(data=>{
    return data.text();
}).then(ret=>{
    console.log(ret);
});

    5.fetch相应结果
   响应数据格式

•  text():将返回体处理成字符串类型
•  json():返回结果和JSON.parse（responseText）一样

fetch('/abc'then(data=>{
    //return data.text();
    return data.json();
}).then(ret=>{
    console.log(ret);
});

9、axios的基本特性
   1.axios是一个基于Promise用于浏览器和node.js的HTTP客户端

•  特征
  支持浏览器和node.js
  支持Promise
  能拦截请求和相应
  自动转换JSON数据
•  基本用法

axios.get('/adata')
    .then(ret=>{
        //data属性名称是固定的，用于获取后台响应数据
        console.log(ret.data)
    })

•  axios常用的API
  get:查询数据
  post:添加数据
  put:修改数据
  delete:删除数据

  2.axios的参数传递

    1.GET传递参数

•  通过URL传递参数
•  通过params选项传递参数

axios.get('/adata?id=123')
    .then(ret=>{
        console.log(ret.data)
    })


axios.get('/adata/123')
    .then(ret=>{
        console.log(ret.data)
    })


axios.get('/adata',{
    parmas:{
        id:123
        }
    })
    .then(ret=>{
        console.log(ret.data)
    })

    2.POST传递参数

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

axios.post('/adata',{
    uname:'tom',
    pwd:123
}).then(ret=>{
    console.log(ret.data)
})

    3.PUT传递参数

•  参数传递与POST类似

axios.put('/adata/123',{
    uname:'tom',
    pwd:123
}).then(ret=>{
    console.log(ret.data)
})

   3.接口调用-axios用法

•  axios的全局配置
•  axios.defaults.timeout=3000;//超越时间

•  axios.defaults.baseURL=‘http://localhost:3000/app’//默认地址

•  axios.defaults.headers[‘mytoken’]=‘aqwerwqwerqwer2ewrwe23eresdf23’//设置请求头

   4.axios拦截器
    1.请求拦截信息
    在请求发出之前设置一些信息

//添加一个请求信息
axios.interceptors.request.use(function(config)){
    //在请求之前进行一些信息设置
    return config;
},function(err){
    //处理响应的错误信息
});

10、接口调用-async/await用法
基本用法

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

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