axios封装笔记

1.根目录下新建config

const hosturl= '';
// 生产环境
module.exports = {
    NODE_ENV: '"production"',
    hosturl:'http://127.0.0.1:8880'
}

2.新建api

// 1.导入axios
import axios from "axios";
const Env = require('../../config/dev.env')
    // 2.创建axios副本
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
    // 创建axios实例
const service = axios.create({
    baseURL: Env.hosturl,
    timeout: 10000
});
// 3.请求拦截器
service.interceptors.request.use(
    (config) => {
        return config;
    },
    (error) => {
        // console.log(error, "请求失败之后的结果");
        return Promise.reject(error);
    }
);
// 4.响应拦截器
service.interceptors.response.use(
    (res) => {
        if (res.data.success) {
            return res.data;
        } else {
            // 错误的提示信息
            return Promise.reject(res.data.message);
        }
    },
    (error) => {
        // return Promise.reject(error);
        return error, "响应失败的结果";
    }
);
// 5.暴露出去
export default service;

3.测试，编写ebooks.js

import request from "./request";

export function getBanners() {
    return request({
        url: "/ebook/ebookList",
        method: "Get",
    });
}

4. 在页面中调用

import { getBanners } from "../api/ebooks.js";

//vue3
onMounted(() => {
      getBanners().then((res:any) => {
        ebooks.value = res.content;
      });
});
//vue2
mounted(){
   getebooks(){
    getBanners().then((res) => {
        ebooks.value = res.content;
      });
   }
}