第4章 接口调用方式

• 接口调用方式
• 原生ajax
• 基于jQuery的ajax
• fetch
• axios

promise

• 主要解决异步深层嵌套的问题
• promise 提供了简洁的API 使得异步操作更加容易
• 

基于Promise发送Ajax请求

Promise 基本API

实例方法

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

静态方法

• .all()
  Promise.all 方法接受一个数组作参数，数组中的对象（p1、p2、p3）均为promise实例（如果不是一个
  promise，该项会被用 Promise.resolve 转换为一个promise)。它的状态由这三个promise实例决定
• .race()
  Promise.race 方法同样接受一个数组作参数。当p1, p2, p3中有一个实例的状态发生改变（变为 fulfilled 或 rejected ），p的状态就跟着改变。并把第一个改变状态的promise的返回值，传给p的回调函数
  

fetch

• Fetch API是新的ajax解决方案 Fetch会返回Promise
• fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。
• fetch(url, options).then(）
• 

fetch API 中的 HTTP 请求

• fetch(url, options).then(）
• HTTP协议，它给我们提供了很多的方法，如POST，GET，DELETE，UPDATE，PATCH和PUT
  默认的是 GET 请求
  需要在 options 对象中 指定对应的 method method:请求使用的方法
  post 和 普通 请求的时候 需要在options 中 设置 请求头 headers 和 body
  
  
  
  

fetchAPI 中 响应格式

用fetch来获取数据，如果响应正常返回，我们首先看到的是一个response对象，其中包括返回的一堆原始字
节，这些字节需要在收到后，需要我们通过调用方法将其转换为相应格式的数据，比如 JSON ， BLOB 或者
TEXT 等等

重点:axios

• 基于promise用于浏览器和node.js的http客户端
• 支持浏览器和node.js
• 支持promise
• 能拦截请求和响应
• 自动转换JSON数据
• 能转换请求和响应数据

axios基础用法

• get和 delete请求传递参数
  通过传统的url 以 ? 的形式传递参数
  restful 形式传递参数
  通过params 形式传递参数
• post 和 put 请求传递参数
  通过选项传递参数
  通过 URLSearchParams 传递参数
  
  
  

axios 全局配置

//配置公共的请求头
axios.defaults.baseURL = ‘https://api.example.com’;
// 配置 超时时间
axios.defaults.timeout = 2500;
// 配置公共的请求头
axios.defaults.headers.common[‘Authorization’] = AUTH_TOKEN;
// 配置公共的 post 的 Content-Type
axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;

axios 拦截器

• 请求拦截器
  请求拦截器的作用是在请求发送前进行一些操作
  例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易
• 响应拦截器
  响应拦截器的作用是在接收到响应后进行一些操作
  例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页

async 和 await

• async作为一个关键字放到函数前面
  任何一个 async 函数都会隐式返回一个 promise
• await 关键字只能在使用 async 定义的函数中使用
  await后面可以直接跟一个 Promise实例对象
  await函数不能单独使用
• async/await 让异步代码看起来、表现起来更像同步代码
• 

图书列表案例

1. 基于接口案例-获取图书列表

• 导入axios 用来发送ajax
• 把获取到的数据渲染到页面上
• 
  
  
  

2 添加图书

• 获取用户输入的数据 发送到后台
• 渲染最新的数据到页面上
  -

3 验证图书名称是否存在

• 添加图书之前发送请求验证图示是否已经存在
• 如果不存在 往后台里面添加图书名称
  • 图书存在与否只需要修改submitFlag的值即可
  • 

4. 编辑图书

• 根据当前书的id 查询需要编辑的书籍
• 需要根据状态位判断是添加还是编辑
• 
  

5 删除图书

把需要删除的id书籍 通过参数的形式传递到后台