基于Vue框架封装的api请求

前言：众所周知我们前端开发中，需要和后端密切配合的，更多的真实数据是来自于api接口的请求，基于更多的请求我们前端进行封装方法，以便于我们及时添加api和更换开发环境。

一、在vue项目中创建一个文件夹network

1.创建一个core.js文件，封装axios GET POST请求 代码如下：

import {GET,POST} from "./config"
import axios from "axios";
const instance = axios.create({
  baseURL:"https://api.it120.cc",//本地开发dev版本
   baseURL："pre" //测试版本地址
    baseURL："pro"//正式版本地址
  timeout:8000
})

	//封装GET POST
export function request(method,url,params){
  switch (method){
    case GET:
      return get(url,params)
    case POST:
      return post(url,params)
  }
}

function get(url,params){
  return instance.get(url,params)
}

function post(url,params){  
  return instance.post(url,params)
}

2.封装请求APl，处理接口数据

export const GET = "get";
export const POST ="post";

export const path ={
    list:"/small4/shop/goods/list",
  
}

3.抛出network模块

import {request} from "./core"
import {GET,path} from "./config"

const network = {
  getStoreList(params) {return request(GET,path.list,params)}, 
}
export default network;

4.main.js中配置

import network from "./network/index";
Vue.prototype.$network = network;

5.在home中使用

<template>
  <div class="home">
    <button @click="onClick">点击</button>


    <div v-for="(item,index) in list" :key="index">
        {{item.name}}
      <img :src="item.pic" alt="" width="200px">

    </div>

  </div>
</template>

<script>
// @ is an alias to /src


export default {
  name: 'Home',
  data(){
      return{
        list:[],
      
      }
    },
  components: {
    
    
  },
  methods:{
    onClick(){
      this.$router.push(this.$routerConfig.about.path)
    }
  },
  //调用
  mounted(){
    this.$network.getStoreList({
      page:"1",
      pageSize:"10"
    }).then((response)=>{
      console.log(response.data.data)
      this.list=response.data.data
    }).catch((error)=>{
      console.log(error)
    })
   
  }
}
</script>

总结：综上就是在vue框架中的封装api请求的全部过程及代码，从创建文件夹到细致文件，再到配置项，最后用例。希望此片博文对你有所帮助