封装项目中的接口
1.首先创建一个http文件夹,里面创建三个文件,分别是env.js request.js api.js
env.js来管理环境 request封装方法的主要文件 api.js用来管理接口
在env.js来配置环境
export default { //开发环境 dev: { baseUrl: "https://localhost:8080" }, //测试环境 test: { baseUrl: "https://test.365msmk.com" }, //生产环境 prod: { baseUrl: "https://www.365msmk.com" } };
2.在request.js进行axios拦截,执行请求前和请求后进行的一些操作
import axios from "axios"; import env from "./env.js"; const vipUrl = "/api/app/"; //创建一个axios实例 const service = axios.create({ baseURL: env.prod.baseUrl + vipUrl }); //请求拦截 service.interceptors.request.use( config => { config.headers["deviceType"] = "H5"; console.log("请求的数据:", config); return config; }, error => { return Promise.reject("出错啦"); } ); //响应拦截 service.interceptors.response.use( response => { //根据返回不同的状态码来做后续处理 console.log("返回的数据", response); return response; }, error => { return Promise.reject("返回报错"); } ); export default service;
3.最后在api.js中封装接口并抛出
import request from "./request"; //封装业务的各种接口 /** * 获取轮播图 */ export function getBanners() { return request({ url: "/banner", method: "GET" }); } }
4.最后在组件中引用,请求数据
<template> <div class="home"> </div> </template> <script> import { banner} from "../http/api"; export default { name: "Home", mixins:[GetUserDataMixIn], data() { return { page: 1, //定义接口中要传的当前页数 limit: 10, //定义接口中要传的数据条数 list: [] }; }, created() { this.getBannersData(); }, methods: { //获取课程列表 getBannersData() { getBanners({ page: this.page, limit: this.limit }).then(res => { //console.log("课程列表", res); let { code, data: { list } } = res.data; if (code === 200) { console.log("list:", list); this.list = list; } }); }, }; </script> <style lang="scss"> </style>
最后就可以获取数据了