vue-cli对axios的二次封装

一.首页在src目录下建立两个文件夹

分别为utils和api

二.分别在文件夹下新建两个文件

request.js用来封装axios，login.js用于封装api

三.直接上代码，学会自己理解

1.request.js完整代码(放在utils目录下)

import axios from 'axios'
//创建一个axios对象  
const instance = axios.create({
        baseURL: '这里自己填', //baseURL会在发起请求的时候自动拼接在url前面
        timeout: 5000
    })
    //请求拦截
instance.interceptors.request.use(
        config => {
            return config
        },

        err => {
            return Promise.reject(err)
        }
    )
    // 响应拦截
    //根据服务器状态码做响应处理
instance.interceptors.response.use(
    function(res) {
        return res.data
    },

    function(err) {
        let { response } = err
        if (response) {
            // 服务器返回结果
            switch (response.status) {
                case 401: //需要验证用户(一般是未登录)
                    // 跳转登录页
                    break;
                case 403: //服务器理解请求单拒绝(token过期)
                    break;
                case 404: //
                    break;
            }
        } else {
            // 服务器崩溃或者断网
            if (!window.navigator.onLine) {
                // 断网处理  可以跳转到断网页面
                return
            }
        }
        return Promise.reject(err)
    }
)

export function get(url, params) {
    return instance.get(url, {
        params
    })
}
export function post(url, data) {
    return instance.post(url, data)
}
export function put(url, data) {
    return instance.put(url, data)
}
export function del(url, data) {
    return instance.del(url, data)
}

2.login.js完整代码(放在api目录下)

import {get} from "@/utils/request"

export function SelectUsers(){
    return get("/api/users")
}

3.login.vue完整代码，里面有调用

<template>
    <div><el-input v-model="input" placeholder="请输入内容"></el-input><span>1344</span></div>
</template>
<script>
import {SelectUsers} from "@/api/login"
export default {
    data () {
        return {
            input:''
        }
    },
    created () {
        SelectUsers().then(res=>{
            console.info(res);
            this.input=res[0].email;
        })
    }
}
</script>

四.如果报错中含有CROS，就是接口跨域问题，自行去网上找解决方案