vue+axios请求封装+接口封装和使用

请求

1. axios下载
   npm i axios -S
2. 封装axios请求
   在src目录下新建network文件夹
   在文件夹下新建index.js(存放二次封装的请求)

import axios from 'axios';

const instance = axios.create({
    baseURL: 'http://xxxxxxxxxx/',//具体根据接口来写
    timeout: 10000,
    headers: { 
        'Content-Type': 'application/json;charset=utf-8',
        // 'Access-Control-Allow-Origin': '101.200.210.74:6699', 
    },
})
instance.interceptors.request.use((config) => {
    return config
}, error => {
    return Promise.reject(error);
})
instance.interceptors.response.use(
    response => {
        return response.data
    },
    error => {
        if (error.message.includes('timeout')) {
            this.$message.error("网络超时，请刷新页面");
        }
        return Promise.reject(error);
    },
)
export default function request(option) {
    return new Promise((resolve, reject) => {
        instance(option).then(res => {
            if (res.code == 2000) {
                resolve(res)
                this.$message.success('请求数据成功');
            } else {
                this.$message.error('网络超时，请刷新页面');
                // this.$message.warning('网络超时，请刷新页面');
            }
        }).catch(err => {
            reject(err);
            console.log(err)
        })
    })
}

3. 接口封装
   在network目录下新建http.js文件（存放接口）
   引入封装好的axios
   import request from ‘./index’

import request from "./index";
//封装公共请求接口
//post请求
//请求书列表
export const fn = (data) => {
    return request({
        url: 'api/XXX',//具体根据接口来写
        method: 'POST',
        data
    })
}

4. 公共接口的使用
   在vue页面中引入需要的接口方法
   import { fn} from "@/network/http";
   直接使用

//公共接口请求
mounted() {
    let obj = { page: 3, size: 2 };
    fn(obj)
    .then(res=>{
      console.log(res);//res拿到的数据
    })
    .catch(err=>{
      console.log(err);
    });
}

小桃桃有什么问题，请指教！