vue3.0之axios的请求的封装

vue3.0之axios的请求的封装

• 安装：
  • npm i axios --save
• 使用：
  • utils/api/http.ts

import axios from "axios";

const request = axios.create({
  // baseURL: 'http://120.76.247.5:2001/api',
  baseURL: process.env.VUE_APP_BASEURL, // 根据不同的环境 区分不同的基础url
  withCredentials: true,
});

export default request;

• 区分不同的环境

• 在项目的根目录下创建以下两个文件 .env.development 与 .env.production
• 1：.env.development

VUE_APP_BASEURL = http://huangjinggjun.top:9001/movie/

• 2：.env.production

VUE_APP_BASEURL = http://XXX.top:9001/movie/

实际的请求 api/movei.ts

import http from "./http";

//获取正在热映
export const getInTheaters = ({ start = 0, count = 5 }) => {
  return http({
    url: `in_theaters?start=${start}&count=${count}`,
  });
};

使用请求

<template>
  <div>我是home</div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onMounted } from "vue";
// , getComingSoon, getTop250s
import { getInTheaters } from "../utils/api/movie";
export default defineComponent({
  name: "Home",
  components: {},
  setup() {
    const state = reactive({
      inTheaters: [], // 正在热映
      comingSoon: [], // 即将上映
      top250: [] // top250
    });

    const getInTheatersData = () => {
      let obj = { start: 0, count: 5 };
      getInTheaters(obj).then(res => {
        console.log("res", res);
      });
    };
    onMounted(() => {
      getInTheatersData();
    });
    return {
      ...toRefs(state)
    };
  }
});
</script>
<style  lang="scss" scoped>
</style>