Vue全家桶-前后端交互

1. 前后端交互模式

1.1 接口调用方式

原生 ajax
基于 jQuery 的ajax
fetch
axios

1.2 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=lisi&age=12
6.fragment ：锚点（哈希Hash），用于定位页面的某个位置
符合规则的URL
1.http://www.itcast.cn
2.http://www.itcast.cn/java/web
3.http://www.itcast.cn/java/web?flag=1
4.http://www.itcast.cn/java/web?flag=1#function

2. Restful 形式的 URL

HTTP请求方式
1.GET 查询
2.POST 添加
3.PUT 修改
4.DELETE 删除
符合规则的URL地址
1.http://www.hello.com/books GET
2.http://www.hello.com/books POST
3.http://www.hello.com/books/123 PUT
4.http://www.hello.com/books/123 DELETE

2. Promise 用法

2.1 异步调用

$.ajax({
  success: function(data){
    if(data.status == 200){
      $.ajax({
        success: function(data){
          if(data.status == 200){
            $.ajax({
              success: function(data){
                if(data.status == 200){}
              }
            });
          }
        }
      });
    }
  }
});

2.2 Promise 概述

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

2.3 Promise 基本用法

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

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

2.4 基于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();
  });

2.5 then参数中的函数返回值

1. 返回 Promise 实例对象

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

2. 返回普通值

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

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

3. 接口调用-fetch用法

3.1 fetch 概述

1. 基本特性

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

2. 语法结构

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

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

3.3 fetch请求参数

1. 常用配置选项

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

text（）方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于过去后台返回的数据

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

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

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

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

3.4 fetch响应结果

响应数据格式
text()： 将返回体处理成字符串类型
json()：返回结果和 JSON.parse(responseText)一样

4. 接口调用-axios用法

4.1 axios 的基本特性

axios（官网：https://github.com/axios/axios）是一个基于Promise 用于浏览器和 node.js 的 HTTP 客户端。
它具有以下特征：
1.支持浏览器和 node.js
2.支持 promise
3.能拦截请求和响应
4.自动转换 JSON 数据

4.2 axios 的基本用法

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

4.3 axios 的常用API

get ： 查询数据
post ： 添加数据
put ： 修改数据
delete ：删除数据

4.4 axios 的参数传递

1. GET传递参数

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

2. DELETE传递参数

3. POST传递参数

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

通过 URLSearchParams 传递参数（application/x-www-form-urlencoded）

4. PUT传递参数

参数传递方式与POST类似

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

4.5 axios 的响应结果

响应结果的主要属性
data ： 实际响应回来的数据
headers ：响应头信息
status ：响应状态码
statusText ：响应状态信息

axios.post('/axios-json‘).then(ret=>{
    console.log(ret)
  })

4.6 axios 的全局配置

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

4.6 axios拦截器

1. 请求拦截器

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

2. 响应拦截器

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

5. 接口调用-async/await用法

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

5.2 async/await 处理多个异步请求

多个异步请求的场景

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