【大白话】结合官方文档说Vue之前后端交互

前言

Vue和React属于当下主流框架，初学者（包括我）在选择的时候可能会犯难，我给个个人建议：初学选啥都一样，看个人爱好，想UI和JS一起写的推荐React，想数据渲染简单一点的选择React，两者在编码上存在 互相借鉴 ，都推荐使用Hooks编码，原理也大差不差，会其中一个，另一个在花个一周时间可以很快上手，相当于买一送一，很实惠了。

本系列主要介绍以下模块：

• 1.基础模版语法指令
• 2.比较常用的特性
• 3.组件化开发
• 4.前后端的一些交互功能
• 5.一些路由知识

前后端交互

我理解的前后端交互模式是这样的：前端发请求调用后台接口，获取到服务器端的数据。这里的接口调用大都为异步操作，传统使用AJAX，现使用Promise进行异步的调用（fetch、axios、async/await等）。fetch 可以理解为jQuery ajax 的升级版，axios为第三方的库，可以更简单方便的调用接口。

其中，客户端要想想服务器端发送请求，就得借助URL上传到互联网，借助互联网到达服务器端，服务器端拿到请求后，响应一个HTML页面或数据。客户端可在地址请求中完成对数据的增(POST)删(DELETE)查(GET)改(PUT)操作。

Promise基本用法

Promise 是异步编程的一种解决方案，其基本用法为：首先实例化一个 Promise 对象，然后在构造函数的参数中传入一个函数，这函数用来处理异步任务。异步结果通过传入的函数的两个参数(resolve,reject)处理成功失败两种情况，使用 p.then 调用。大致为：

  <script type="text/javascript">
    var p = new Promise(function(resolve, reject){
      setTimeout(function(){
        var flag = true;
        if(flag) {
          //成功情况
          resolve('hello');
        }else{
          //失败情况
          reject('出错了');
        }
      }, 100);
    });
    p.then(function(data){
      //打印成功信息
      console.log(data)
    },function(info){
     //打印失败信息
      console.log(info)
    });
  </script>

Promise实例生成以后，可以用then方法指定resolved状态和reject状态的回调函数 ，在then方法中，可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了 。

更多关于API的实例方法参考其他博主的 Promise学习 。其中，.then 是成功时执行，.catch 为失败时执行 ，finally 为无论成功与否都要执行。另外，Promise还有些对象方法，如：Promise.all()并发处理多个异步任务，所有任务都执行完才能得到结果；Promise.race() 大概同上，但只有一个任务完成就打印结果。

fetch基本用法

基于Promise实现，基本用法为：

  <script type="text/javascript">
    /*  第一个参数请求的路径 Fetch会返回Promise 所以可以使用then 拿到请求成功的结果 */
    fetch('URL').then(function(data){
      // text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据
      return data.text();
    }).then(function(data){
      //   在这个then里面我们能拿到最终的数据  
      console.log(data);
    })
  </script>

fetch API 中的 一些HTTP 请求， fetch(url, options).then() ,默认的是 GET 请求，需要在在 options 对象中 指定对应的 method 中指明需要的请求方法。

GET和DELETE传参需要在url配置数据，在在options 里说明是哪种方式； POST和PUT需要在 options 设置 body 和 headers 用来传递数据和设置请求头；

上述请求得到相应并正常返回的话，需要通过调用方法将其转换为相应格式的数据，比如json格式数据类型 JSON.parse(data) ，处理方法和上面的 return data.text(); text() 字符串类型大致相同。

axios基础用法

这博主的axios详解已经讲的很详细了，这里我就偷懒下，想看的点 传送门就好。

简单说下axios ：它跟ajax一样，都是网络异步请求，基于Promise ，所以可以使用上述Promise API。在发送请求之前，需要设置请求拦截器，获取数据之前需要响应拦截器对数据进行加工处理，这样可以根据特定要求如请求头信息筛选出特定数据。配置大体如下：

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

//发送post请求
axios.post('/user',{
    uName: 'jiayou',
    pwd: 123
}).then(res=>console.log(res))
    .catch(err=>console.log(err));

async 和 await

async 和 await 大家或许会更熟悉，前面在学习 jQuery 异步操作时就经常得以使用。async 放到函数前面，await 只能在使用async定义的函数中使用，最后该函数则会返回一个promise 对象。

   async function queryData() {
      var ret = await new Promise(function(resolve, reject){
        setTimeout(function(){
          resolve('jiayou')
        },1000);
      })
      return ret;
    }

前端交互部分就到这吧，虽然还有很多零碎的API使用规则及限制，但整理的有点累就不想写了，后面开始路由部分吧。

持续更新中