axios

最新推荐文章于 2024-09-01 02:07:48 发布

希望大佬文章可以白嫖

最新推荐文章于 2024-09-01 02:07:48 发布

阅读量88

点赞数

分类专栏： vue组件文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/shiyibushiwei/article/details/126395933

版权

vue组件专栏收录该内容

7 篇文章 0 订阅

订阅专栏

该博客展示了在Vue.js应用中如何使用axios进行API调用。`utils/request.js`创建了一个axios实例，设置了基础URL和超时时间。在`api/product.js`中，定义了获取轮播图、导航和分类、商品数据的API接口。在页面中，导入并使用这些API来获取轮播图数据，并在组件的`mounted`生命周期钩子中调用数据。

摘要由CSDN通过智能技术生成

1、utils/request.js

import axios from "axios";
let service = axios.create({
    baseURL: "https://v4.crmeb.net/api",
    timeout: 5000
})


export default service

2、api/product.js

import service from "@/utils/request.js"



// 轮播图
// get
export const GetBanner = (params) => {
    return service({
        url: "/pc/get_banner",
        method: "get",
        params
    })
}
// 导航，分类
// get
export const NavDatas = (data) => {
    return service({
        url: "/category",
        method: "get",
        data
    })
}
// 商品数据
// get
export const ShopDatas = (params) => {
    return service({
        url: "/pc/get_category_product",
        method: "get",
        params
    })
}
// 登录
// post
// export const LoginApi = (data) => {
//     return service({
//         url: "/pc/get_banner",
//         method: "post",
//         data
//     })
// }

3、页面

import { GetBanner } from "@/api/product.js";
//方法集合
  methods: {
    //轮播图的index
    handleChange(index) {
      console.info(index);
    },
    //获取轮播图的数据
    async banDatas() {
      let result = await GetBanner();
      this.bannerDatas = result.data.data.list;
      return;
    },
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.banDatas();
  },