封装axios请求

一般的Vue项目中需要封装axios请求。

首先在主项目中使用命令行$ npm install axios下载axios

创建request.js

// 引入axios
import axios from 'axios'

export function axiosrequest(config){
  // 进行基础配置
  const instance = axios.create({
    baseURL:'http://localhost:3000/',
    timeout:10000
  })
  return instance(config) 
}

在这里封装axios的基础配置

创建home.js

import {get} from './request'

export function homeMultidata(){
  return axiosrequest({
    url:'posts/1',
  })
}

进行更加详细的页面配置，可以创建多个类似home.js的细分配置文件，它们共同拥有request.js的基础配置

创建test.vue

<template>
</template>

<script>
    //获取 home.js 中的 homeMultidata
    import {homeMultidata} from './home'

    created(){
      homeMultidata().then(res => {
        // 获取到的res来自  http://localhost:3000/posts/1
        this.banner = res.posts
        this.recommend = res.posts
      })
    }
</script>

<style>
</style>