79、vue 中 ajax请求封装以及组件调用方法 ( async/await）

async/await
1）async/await场景
这是一个用同步的思维来解决异步问题的方案，当前端接口调用需要等到接口返回值以后渲染页面时。
2）名词解释
(1)async
async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行， async 函数返回的是一个promise 对象。
(2)await
await的含义为等待。意思就是代码需要等待await后面的函数运行完并且有了返回结果之后，才继续执行下面的代码。这正是同步的效果

例子如下：await要放在async中，并且await后面的函数运行后必须返回一个Promise对象才能实现同步的效果。

1.api/ajax.js

import axios from 'axios'
 
export default function ajax(url = '',params = {} ,type = 'GET'){
  let promise;
  return new Promise((resolve ,reject)=>{
  //  判断请求的方式
    if(type == 'GET'){
      let paramsStr = '';
      Object.keys(params).forEach( key=>{
        paramsStr += key+'='+params[key]+'&';
      })
      if(paramsStr != ''){
        paramsStr = paramsStr.substr(0,paramsStr.lastIndexOf('&'));
      }
      url+='?'+paramsStr;
      promise = axios.get(url);
    }else{
      promise = axios.post(url,params)
    }
    promise.then((res)=>{
      resolve(res.data)
    }).catch((err)=>{
      reject(err);
    })
  })
}

2.api/index.js

import ajax from './ajax'
 
const BASE_URL = 'https://localhost:3000/';
 
//请求方法
export const getHomeCasual = ()=>ajax(BASE_URL+'Homeapp.do');

3.组件中调用请求方法

import { getHomeCasual } from './../api/index'

created(){
  this.getHomeData();
},
methods:{
  // 请求数据  async/await=>异步转为同步
  async getHomeData (){
      const result = await getHomeCasual();
      console.log(result);
  }
}

axios 常规用法

new Vue({
   el:"#app",
   created(){
      this.ajaxData();
   },
   mothods:{
      ajaxData(){
         const result = axios.get('/homeapp.do').then((res)=>{
                                  console.log(res);
                              })
                              .catch((err)=>{
                                  console.log(res);
                              })
      }
   }     
})   

axios 同步用法

new Vue({
   el:"#app",
   created(){
      this.ajaxData();
   },
   mothods:{
      async ajaxData(){
     try{
 const result = await axios.get('/homeapp.do');
         console.log(result);
}catch(e){
  alert('请求出错了：'+e)
}
        
      }
   }     
})

上面会有点操作繁琐每次请求回来的数据都要try--catch判断接口如果很多的话很繁琐
下面我们对ajax.js进行优化我们把返回的reject（error）隐藏，直接弹出报错即可这样大大减少了开发效率，
还有就是如果接口中没有用到headers就可以直接删掉（仅供参考）

export default function ajax (url, data={}, type='GET',headers) {
  //优化处理请求异常这样就不用在请求的地方用try catch判断了；这里新建一个promise在错误的时候不用返回reject（error）了
  return new Promise(function (resolve, reject) {
    // 执行异步ajax请求
    let promise
    if (type === 'GET') {
      // 准备url query参数数据
      let dataStr = '' //数据拼接字符串
      Object.keys(data).forEach(key => {
        dataStr += key + '=' + data[key] + '&'
      })
      if (dataStr !== '') {
        dataStr = dataStr.substring(0, dataStr.lastIndexOf('&'))
        url = url + '?' + dataStr
      } `+`
      // 发送get请求
      promise = axios.get(url,headers)
    } else {
      // 发送post请求
      promise = axios.post(url, data,headers)
    }
    promise.then(function (response) {
      // 成功了调用resolve()
      resolve(response.data)
    }).catch(function (error) {
      //失败了调用reject()
     alert('请求出错了：'+e)
      //reject(error)
    })
  })
}