Vue单页应用中的同步ajax请求

1.什么是Vue的单页应用

传统的后台管理系统有很多功能模块，需要写很多网页。我们可以使用Vue，通过vue的路由和组件功能，只写一个页面就可以完成一个管理系统。

2.axios的使用

//1.需要引入的依赖
import axios from 'axios'
  //2.可以对axios做一些配置

axios.defaults.baseURL = “xxx”; // 设置axios的基础请求路径
axios.defaults.timeout = 2000;  // 设置axios的请求时间
 //3.可以给axios封装方法

axios.loadData = async function (url) {
  const resp = await axios.get(url);
  return resp.data;
}

3.Vue中全局引入axios

//把axios实例引入到Vue的实例
Vue.prototype.$http = axios;
 //在组件中使用，通过this.$http就能找到axios了

 this.$http.get("/item/brand/page", {
    params: {
      key: this.search, // 搜索条件
      page: this.pagination.page,// 当前页
      rows: this.pagination.rowsPerPage,// 每页大小
      sortBy: this.pagination.sortBy,// 排序字段
      desc: this.pagination.descending// 是否降序
    }
  }).then(resp => { // 这里使用箭头函数
    this.brands = resp.data.items;
    this.totalBrands = resp.data.total;
    // 完成赋值后，把加载状态赋值为false
    this.loading = false;
  })
},

全局引入的好处：全局引入axios后，所有组件都可以使用axios，而不需要重复配置和引入依赖。

3.如何使ajax请求同步

3.1封装axios的get方法

/**
 * 1、我们自己封装的、同步ajax请求方法
 * 2、也是get请求，同步德get请求
 * @param url
 * @returns {Promise<*>}
 */
axios.loadData = async function (url) {
  const resp = await axios.get(url);
  return resp.data;
}

3.2在组件中调用封装好的loadData同步ajax方法

/**
 * 1、async和下面的await配合使用
 * 2、如果不加这个关键字的话，js的ajax请求默认是异步的，也就是说，下面方法里的两个请求，不管成功与失败，后面的代码都会执行
 * 3、这里我们的业务逻辑是，如果ajax请求数据失败的话，显示编辑框也没有意义
 * 4、所以加上同步关键字，让ajax变成同步的，让他们顺序执行，如果请求失败，后面就别执行了
 * 5、注意，loadData方法，是我们自己封装的。点进去看看。
 */
async editGoods(oldGoods) {
  // 发起请求，通过spuID 查询商品详情和skus
  oldGoods.spuDetail = await this.$http.loadData("/item/spu/detail/" + oldGoods.id);
  oldGoods.skus = await this.$http.loadData("/item/sku/list?id=" + oldGoods.id);
  // 修改标记
  this.isEdit = true;
  // 控制弹窗可见：
  this.show = true;
  // 获取要编辑的goods
  this.oldGoods = oldGoods;
},