Vue基础-day-04（接口调用方式，Promise，Fetch，axios）

1 Restful形式的URL

http请求方式

1. GET 查询
2. POST 添加
3. PUT 修改
4. DELETE 删除

符合规范的URL地址（restful形式）

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 GET

2 异步调用

接口的调用方式

• 原生ajax
• 基于jQuery的ajax
• fetch
• axios
  url地址格式有哪些
• 传统的url
• restful的url

异步

• JavaScript的执行环境是「单线程」
• 所谓单线程，是指JS引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个，它会「阻塞」其他任务。这个任务可称为主线程
• 异步模式可以一起执行多个任务
• JS中常见的异步调用
• 定时任何
• ajax
• 事件函数
  多次异步调用的依赖分析
• 多次异步调用的结果顺序不确定
• 异步调用结果如果存在依赖需要嵌套

//回调地狱（不建议使用）
$.ajax({
success:function(data){
if(data.status==200){
$.ajax({
success:function(data){
if(data.status==200){
$.ajax({
success:function(data){
if(data.status==200){
}
}
})
}
}
})
}
}
})

Promise基本用法

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

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

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

基于Promise发送Ajax请求

多次发送ajax请求
queryData()
.then(function(data){
return queryData()
})
.then(function(data){
return queryData()
})
.then(function(data){
return queryData()
})

Promise基本API

实例方法

.then()

• 得到异步任务正确的结果

.catch()

• 获取异常信息

.finally()

• 成功与否都会执行（不是正式标准）

Promise常用的API 对象方法

.all()

• Promise.all()并发处理多个异步任务，所有任务都执行后才能得到结果
• Promise.all方法接受一个数组作参数，数组中的对象（p1、p2、p3）均为promise实例（如果不是一个promise，该项会被用Promise.resolve转换为一个promise)。它的状态由这三个promise实例决定

.race()

• 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(）
• 基本特性：更加简单的数据获取方式，功能更强大，更灵活，可以看做是xhr的升级版，是基于Promise实现的，
  语法结构
  fetch(url).then(fn2)
  .then(fn3)
  .then(fn4)
  .....
  .catch(fn)

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等等

 /*
      Fetch响应结果的数据格式
    */
    fetch('http://localhost:3000/json').then(function(data){
      // return data.json();   //  将获取到的数据使用 json 转换对象
      return data.text(); //  //  将获取到的数据 转换成字符串 
    }).then(function(data){
      // console.log(data.uname)
      // console.log(typeof data)
      var obj = JSON.parse(data);
      console.log(obj.uname,obj.age,obj.gender)
    })

Axios

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

axios基础用法
首先需要导入axios包或者文件

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

 # 1. 发送get 请求 
    axios.get('http://localhost:3000/adata').then(function(ret){ 
      #  拿到 ret 是一个对象      所有的对象都存在 ret 的data 属性里面
      // 注意data属性是固定的用法，用于获取后台的实际数据
      // console.log(ret.data)
      console.log(ret)
    })
    # 2.  get 请求传递参数
    # 2.1  通过传统的url  以 ? 的形式传递参数
    axios.get('http://localhost:3000/axios?id=123').then(function(ret){
      console.log(ret.data)
    })
    # 2.2  restful 形式传递参数 
    axios.get('http://localhost:3000/axios/123').then(function(ret){
      console.log(ret.data)
    })
    # 2.3  通过params  形式传递参数 
    axios.get('http://localhost:3000/axios', {
      params: {
        id: 789
      }
    }).then(function(ret){
      console.log(ret.data)
    })
    #3 axios delete 请求传参     传参的形式和 get 请求一样
    axios.delete('http://localhost:3000/axios', {
      params: {
        id: 111
      }
    }).then(function(ret){
      console.log(ret.data)
    })

    # 4  axios 的 post 请求
    # 4.1  通过选项传递参数
    axios.post('http://localhost:3000/axios', {
      uname: 'lisi',
      pwd: 123
    }).then(function(ret){
      console.log(ret.data)
    })
    # 4.2  通过 URLSearchParams  传递参数 
    var params = new URLSearchParams();
    params.append('uname', 'zhangsan');
    params.append('pwd', '111');
    axios.post('http://localhost:3000/axios', params).then(function(ret){
      console.log(ret.data)
    })

    #5  axios put 请求传参   和 post 请求一样 
    axios.put('http://localhost:3000/axios/123', {
      uname: 'lisi',
      pwd: 123
    }).then(function(ret){
      console.log(ret.data)
    })

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，统一做了处理如果以后要改也非常容易
• 响应拦截器
• 响应拦截器的作用是在接收到响应后进行一些操作
• 例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页

# 1. 请求拦截器 
    axios.interceptors.request.use(function(config) {
      console.log(config.url)
      # 1.1  任何请求都会经过这一步   在发送请求之前做些什么   
      config.headers.mytoken = 'nihao';
      # 1.2  这里一定要return   否则配置不成功  
      return config;
    }, function(err){
       #1.3 对请求错误做点什么    
      console.log(err)
    })
    #2. 响应拦截器 
    axios.interceptors.response.use(function(res) {
      #2.1  在接收响应做些什么  
      var data = res.data;
      return data;
    }, function(err){
      #2.2 对响应错误做点什么  
      console.log(err)
    })

async 和 await

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

    # 1.  async 基础用法
    # 1.1 async作为一个关键字放到函数前面
    async function queryData() {
      # 1.2 await关键字只能在使用async定义的函数中使用      await后面可以直接跟一个 Promise实例对象
      var ret = await new Promise(function(resolve, reject){
        setTimeout(function(){
          resolve('nihao')
        },1000);
      })
      // console.log(ret.data)
      return ret;
    }
    # 1.3 任何一个async函数都会隐式返回一个promise   我们可以使用then 进行链式编程
    queryData().then(function(data){
      console.log(data)
    })

    #2.  async    函数处理多个异步函数
    axios.defaults.baseURL = 'http://localhost:3000';

    async function queryData() {
      # 2.1  添加await之后 当前的await 返回结果之后才会执行后面的代码   
      
      var info = await axios.get('async1');
      #2.2  让异步代码看起来、表现起来更像同步代码
      var ret = await axios.get('async2?info=' + info.data);
      return ret.data;
    }

    queryData().then(function(data){
      console.log(data)
    })