Vue学习笔记（五）--- fetch、axios、async和await

一、fetch

1、概念

​ Fetch 是新的 ajax 解决方案，是 XMLHttpRequest 的升级版，利用原生 js 发送请求。fecth 的功能与 XMLHttpRequest 基本相同，不同之处有：首先fecth 会返回 Promise 对象，不使用回调函数，使代码更简洁。其次 fecth 采用模块化设计，API分散在多个对象上（Response 对象、Request 对象、Headers 对象）。

2、语法

fetch(url[,{options}]).then().then()

​ 第一个参数 url ，表示的是请求的地址。

​ 第二个参数 options ，表示的是请求的相关参数，常用的有：method – 请求方式，默认为 get、body – 请求时要携带的参数数据、headers – 设置请求头。

​ fecth方法后面需要跟两个 then() 的原因是：fecth 方法响应的数据是一个 response 对象，其中包含一堆原始字节。收到这些字节后，我们需要在第一个 then() 中，通过对应方法将其转换为对应类型的数据，然后返回一个 Promise 对象，由第二个 then() 接收，再对其进行具体操作。

3、响应数据处理

​ 我们常用的数据处理方案有：将数据装换成json对象格式数据，以及将数据转换成字符串。分别使用json() 和 text() ，两种方法将数据处理完后，会返回一个 Promise 对象，里面包含处理后的数据。

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

4、常见的HTTP请求案例

  /*
              Fetch API 调用接口传递参数
        */
       #1.1 GET参数传递 - 传统URL  通过url  ？ 的形式传参 
        fetch('http://localhost:3000/books?id=123', {
            	# get 请求可以省略不写 默认的是GET 
                method: 'get'
            })
            .then(function(data) {
            	# 它返回一个Promise实例对象，用于获取后台返回的数据
                return data.text();
            }).then(function(data) {
            	# 在这个then里面我们能拿到最终的数据  
                console.log(data)
            });

      #1.2  GET参数传递  restful形式的URL  通过/ 的形式传递参数  即  id = 456 和id后台的配置有关   
        fetch('http://localhost:3000/books/456', {
            	# get 请求可以省略不写 默认的是GET 
                method: 'get'
            })
            .then(function(data) {
                return data.text();
            }).then(function(data) {
                console.log(data)
            });

       #2.1  DELETE请求方式参数传递      删除id  是  id=789
        fetch('http://localhost:3000/books/789', {
                method: 'delete'
            })
            .then(function(data) {
                return data.text();
            }).then(function(data) {
                console.log(data)
            });

       #3 POST请求传参
        fetch('http://localhost:3000/books', {
                method: 'post',
            	# 3.1  传递数据 
                body: 'uname=lisi&pwd=123',
            	#  3.2  设置请求头 
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded' 
                }
            })
            .then(function(data) {
                return data.text();
            }).then(function(data) {
                console.log(data)
            });

       # POST请求传参
        fetch('http://localhost:3000/books', {
                method: 'post',
            // 转换成 json 字符串
                body: JSON.stringify({
                    uname: '张三',
                    pwd: '456'
                }),
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(function(data) {
                return data.text();
            }).then(function(data) {
                console.log(data)
            });

        # PUT请求传参     修改id 是 123 的 
        fetch('http://localhost:3000/books/123', {
                method: 'put',
                body: JSON.stringify({
                    uname: '张三',
                    pwd: '789'
                }),
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(function(data) {
                return data.text();
            }).then(function(data) {
                console.log(data)
            });

二、axios

1、概念

​ axios 是一个基于 promise 的第三方库，可以用于浏览器和node.js。能够拦截所有的请求和响应，并对其进行处理。还能自动转换 JSON 数据，无需手动转换。

2、基本用法

语法：

axios.get(‘url’,{params}).then(function(res))

​ 常用的请求方式有四种：get、delete、post、put。{params} 使用来传递参数的，根据请求方法的不同，传递参数的形式也有很大不同。其中get 和 delete 用法很相似，两者传递参数的方式有三种：① 通过传统url以 ? 开头，& 连接的形式 ② 以 restful 的形式传递参数 ③ 通过 params 对象的形式传递参数。post 和 put 用法很相似，两者传递参数的方式有两种： ① 通过参数对象传递参数 ② 通过 URLSearchParams 对象传递参数 。res 表示的是响应结果对象，里面不仅仅包含响应信息，还包含很多别的数据信息。

使用案例：

 # 1. 发送get 请求 
	axios.get('http://localhost:3000/adata').then(function(res){ 
      #  拿到 res 是一个对象      后台返回的响应信息都存在 res 的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  形式传递参数  一定要在 {} 里面使用 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)
    })

3、响应结果对象

​ axios 请求获得响应结果是一个对象，里面除了包含响应数据的 data，还包括 响应头信息 headers 、响应状态码信息 status、响应状态信息 statusText 等信息。

4、全局配置

​ 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';

5、拦截器

​ 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

1、概念

​ async/await 是 ES7 引入的新语法，可以更方便的进行异步操作。async 关键字写在函数前面，此函数的返回值是 Promise 实例对象。await 关键字只能用于 async 函数中异步操作前，只有当该异步操作完成后，再向下执行。await后面可以直接跟一个 Promise实例对象。

2、使用案例

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