前端路线--Vue(day18)

笔记

axios请求数据

1.src–utils–request.js

import axios from "axios";
let ajax = axios.create({
    baseURL: "/api",
    timeout: 5000
})

export default ajax

2.二次封装ajax

import ajax from "@/utils/request.js";


// 暴露方法
export const HomeListApi = (params) => {
    return ajax({
        url: "/goods/type_list",
        method: "get",
        params
    })
}

export const DetaiApi = (data) => {
    return ajax({
        url: "/goods/show",
        method: "post",
        data
    })
}




// 在vuejs中暴露模块两种形式
// export
// export default

3.在目标组件中使用

//1.引入：
import { DetaiApi } from "@/api/home.js";
//2.methods中定义获取数据的方法:
  //方法集合
  methods: {
    // 使用axios请求后台接口
    async getDetaiDatas() {
      let result = await DetaiApi({
        goods_id: this.goods_id,
      });
      this.is_loading = true;
      console.log(result.data.data);
      if (result.data.status == "success") {
        this.is_loading = false;
        this.detailDatas = result.data.data;
      }
    },
  },```
//3.在mounted中调用methods中定义的方法
  mounted() {
    console.log(this.$route.params);
    this.goods_id = this.$route.params.goods_id;
    // 调用axios
    this.getDetaiDatas();
  },