axios

最新推荐文章于 2024-12-26 20:34:27 发布

原创最新推荐文章于 2024-12-26 20:34:27 发布 · 151 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

vue组件专栏收录该内容

7 篇文章

订阅专栏

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

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();
  },