前后端交互模式

1.前后端交互模式

1.1 接口调用方式

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

1.2 URL 地址格式

1.2.1 传统形式的 URL

1.2.2 Restful 形式的 URL

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

2.Promise 用法

2.1 异步调用

• 异步效果分析
  • 定时任务
  • Ajax
  • 事件函数
• 多次异步调用的依赖分析
  • 多次异步调用的结果顺序不确定
  • 异步调用结果如果存在依赖需要嵌套

2.2 Promise 概述

Promise 是异步编程的一种解决方案，从语法上讲，Promise 是一个对象，从它可以获取异步操作的消息

使用 Promise 主要有以下好处：

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

2.3 Promise 基本用法

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

var p = new Promise(function(resolve,reject){
    //成功时调用  resolve()
    //失败时调用  reject()
});

p.then(function(ret){
	//从resolve得到正常结果
})，function(ret){
	//从reject得到错误信息
}

2.4 Promise 常用的 API

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

2.5 Promise 对象方法

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

3.fetch

3.1 fetch 概述

1. 基本特性

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

2. 语法结构

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

        .catch(fn)

3.2 fetch 的基本用法

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

3.3 fetch 请求参数

• method：HTTP 请求方法，默认为 GET（GET,POST,PUT,DELETE)
• body:HTTP 的请求参数
• headers：HTTP 的请求头，默认为{}

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

3.4 fetch 响应结果

响应数据格式

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

4.axios

4.1 axios 的基本特征

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

4.2 axios 的基本用法

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

4.3 axios 的常用 API

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

4.4 axios 的响应结果

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

4.5 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 用法

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