Vue(3)

前后端交互

1. 前后端交互模式
2. Promise用法
3. 接口调用-fetch用法
4. 接口调用-async/await用法
5. 接口调用-async/await用法

接口调用方式

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

URL地址格式

1. 传统形式的URL

   • 格式：schema://host:port/path?query#fragment
     1. schema：协议。例如http、https、ftp等
     2. host：域名或者IP地址
     3. port：端口。http默认端口80，可以省略
     4. path：路径。例如/abc/a/b/c
     5. query：查询参数。例如uname=zhangsan&age=12
     6. fragment：锚点(哈希Hash),用于定位页面的某个位置

2. Restful形式的URL

   • http请求方式
     1. GET：查询
     2. POST：添加
     3. PUT：修改
     4. DELETE：删除

Promise用法

• 异步调用
  • 异步效果分析
    • 定时任务
    • Ajax
    • 事件函数
  • 多次异步调用的依赖分析

    • 多次异步调用的结果顺序不确定

    • 异步调用的结果如果存在依赖需要嵌套

      // 回调地狱，代码结构太复杂，想象一下就好
      

Promise概述：Promise是异步编程的一种解决方案，从语法上将：从它可以获取异步操作的消息

使用Promise主要有以下好处

• 可以避免多层异步调用嵌套问题(回调地狱)
• Promise对象提供了简洁的API，使得控制异步操作更加容易

1. 实例化Promise对象，构造函数中传递函数，该函数用于处理异步任务

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

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

基于Promise处理Ajax请求

// 处理原生Ajax
function queryData(){
    var p = new Promise(function(resolve, rejected){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState!=4) return;
            if(xhr.readyState===4&&xhr.status===200){
                // 处理正常情况
                resolve(xhr.responseText);
            }else{
                // 处理异常情况
                reject('服务器错误');
            }
        };
        xhr.open('get',url);
        xhr.send(null);
    });
    return p;
}

• 发送多次Ajax请求,并且保证顺序

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

• then参数中的函数返回值

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

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((result) => {
       console.log(result);
   });
   Promise.race([p1,p2,p3]).then((result) => {
       console.log(result);
   })
   

接口调用-fetch

• 基本特性：

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

• 语法结构

  fetch(url).then(f2)
            .then(f3)
            ...
            .catch(fn)
  

• fetch的基本语法

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

1. fetch 请求参数

   • 常用配置项

     • method(String):HTTP请求方法，默认为GET(GET、POST、PUT、DELETE)
     • body(String):HTTP的请求参数
     • headers(Object):HTTP请求头，默认为{}

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

   • GET请求方式的参数传递

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

   • DELETE请求方式的参数传递

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

   • POST请求的参数传递

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

     fetch('/books', {
         method: 'post',
         body: JSON.stringify({
             uname: 'zhangsan',
             age: 12
         }),
         headers: {
             'Content-Type': 'application/json'
         }
     }).then(data=>{
         return data.text();
     }).then(ret=>{
         console.log(ret);
     });
     

   • PUT请求参数的传递

     fetch('/books', {
         method: 'put',
         body: JSON.stringify({
             uname: 'zhangsan',
             age: 12
         }),
         headers: {
             'Content-Type': 'application/x-www-form-urlencoded'
         }
     }).then(data=>{
         return data.text();
     }).then(ret=>{
         console.log(ret);
     });
     

2. fetch 响应结果

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

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

接口调用-axios

axios(官网：https://github.com/axios/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：删除数据

axios的参数传递

• GET传递参数

  • 通过URL传递参数

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

  • 通过params选项传递参数

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

• DELETE传递参数

  • 参数传递方式与GET类似

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

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

• POST传递参数

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

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

  • 通过URLSearchParams传递参数(application/x-www-form-urlencoded)

    const params = new URLSearchParams();
    params.append('param1', 'value1');
    params.append('param2', 'value2');
    axios.post('/api/test', params).then(ret=>{
        console.log(ret.data);
    })
    

• PUT请求

  • 参数传递方式与POST类似

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

axios 的响应结果

• 响应结果的主要属性

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

• axios 的全局配置

  • axios.defaults.timeout=3000; 超过时间
  • axios.defaults.baseURL='http://localhost:3000/app'; 默认地址
  • axios.defaults.headers['mytoken']= 'aqwerwqwerqwer2ewrwe23eresdf23' 设置请求头

axios 拦截器

1. 请求拦截器

   • 在请求发出之前设置一些信息

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

2. 响应拦截器

   • 在获取数据之前对数据做一些加工处理

   // 添加一个响应拦截器
   axios.interceptors.response.use(function(res) {
       // 在这里对返回的数据进行处理
       return config;
   },function(err) {
       // 处理响应的错误信息
   });
   

接口调用-async/await 的基本用法

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

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

async/await处理多个异步请求

// 多个异步请求的场景
async function queryData(id) {
    const info = await axios.get('/async');
    const ret = await axios.get(`async2?info=` + info.data);
    return ret;
}
queryData.then(ret=>{
    console.log(ret);
})