Vue(3)

前后端交互

前后端交互模式
Promise用法
接口调用-fetch用法
接口调用-async/await用法
接口调用-async/await用法

接口调用方式

原生Ajax
基于jQuery的Ajax
fetch
axios

URL地址格式

传统形式的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),用于定位页面的某个位置
Restful形式的URL
- http请求方式
  1. GET：查询
  2. POST：添加
  3. PUT：修改
  4. DELETE：删除

Promise用法

异步调用
- 异步效果分析
  - 定时任务
  - Ajax
  - 事件函数
- 多次异步调用的依赖分析
  - 多次异步调用的结果顺序不确定
  - 异步调用的结果如果存在依赖需要嵌套
```
// 回调地狱，代码结构太复杂，想象一下就好
```

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

使用Promise主要有以下好处

可以避免多层异步调用嵌套问题(回调地狱)

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

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

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

实例方法

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

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

对象方法
- 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);
})

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

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 拦截器

请求拦截器

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

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

响应拦截器

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

// 添加一个响应拦截器
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);
})