Vue购物商城项目(二) 数据请求&使用

Vue购物商城项目(二)

---

前言

1.这里面包含了大量的、我的个人理解与看法;

2.这是一个购物商城项目,目前阶段牵扯到路由, 插槽, axios数据请求, 数据存储与使用;

3.这篇只牵扯数据请求(axios), 数据使用;

4.现在这个项目已经全部完成;

---

一、请求数据

思路是在network文件夹的request.js和home.js请求到所有组件的数据传递到Home.vue,拆分数据后再由集中在此的组件模板将对应数据传至各个组件;

在request.js中封装一个request函数构成request.js的主体部分,这个request函数会在home.js里调用并传入axios配置对象,request()在拿到配置对象后会将其与自身内部axios.create()里的baseURL等公用配置进行拼合组成一个完整的配置对象,如此一来request函数就可以从服务器请求到一份数据,返回给Home.js;

request.js

全部代码:

import axios from 'axios'

export function request(config) {
   
    //创建axios示例;
    const instance = axios.create({
   
        baseURL: 'http://152.136.185.210:7878/api/m5',
        timeout: 5000
    })

    //axios拦截器;
    //请求拦截
         instance.interceptors.request.use(config => {
   
            return config
        }, error => {
   
            console.log(error);
        })
        //
        instance.interceptors.response.use(response => {
   
            return response.data
        }, error => {
   
            console.log(error);
        }) 

    return instance(config);
}

部分代码,说说我的一些认识

//此处为request.js
import axios from 'axios'
//引入axios;
export function request(config) {
   
//request()接收从home.js传入的config配置对象;
    const instance = axios.create({
   
        //创建axios实例instance,现在可以instance()传入配置来进行请求;
        baseURL: 'http://152.136.185.210:7878/api/m5',
        timeout: 5000
    })
    return instance(config);
    //向instance中传入config配置对象;
    //以供instance内部进行对配置对象的组合;
}

request()中声明了一个axios实例,实例instance中可以包括众多axios全局配置用于拼接url和完善配置对象,
配置对象的可包含内容见此,您当然可以声明多个instance实例对象,来定制多套axios配置,以备您接下来所要进行的各种不同请求,向不同的instance实例对象传入您所需要的配置对象来组成合适的请求方法,请求不同的数据;

home.js

home.js中通过给request函数传入不同的配置对象,构建了两个方法:getHomeMultidata()和getHomeGoods(),因为这俩方法内置了request,传参进去能拿到数据,所以后面会被Home.vue调用:

//此处为home.js
import {
    request } from "./request"
//引入request.js里的request方法;
export function getHomeMultidata() {
   
//暴露getHomeMultidata();
    return request({
   
        url: '/home/multidata',
    })
    //向request传参一个配置对象config,把request请求到的数据返回
    //存储到getHomeMultidata()中
}

export function getHomeGoods