Vue+Axios_请求封装及使用

一、前言

    本片文章主要记录一下基于axios封装的请求。

二、开始喽

2.1  引入axios

npm install axios --save 

2.2  创建api.js文件

    先在src根目录下创建一个utils文件夹，再在utils文件夹里面新建一个api.js文件（如果想叫别的名字也可以用别的名字）

2.3 将下面的代码粘进去

import axios from 'axios'

let base = 'http://127.0.0.1:8082';

export const getRequest = (url,params) => {
    return axios({
        method: 'get',
        data: params,
        transformRequest: [function (data) {
            /*let ret = ''
            for (let it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
            }

            return ret*/
            let ret =  JSON.stringify(data);
            return ret

        }],
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        url: `${base}${url}`
    });
}

export const postRequest = (url, params) => {
    return axios({
        method: 'post',
        url: `${base}${url}`,
        data: params,
        transformRequest: [function (data) {
            // Do whatever you want to transform the data
            let ret =  JSON.stringify(data);
            //console.log(ret);
            return ret
        }],
        headers: {
            /*'Content-Type': 'application/x-www-form-urlencoded'*/
            'Content-Type': 'application/json'
        }
    });
}

export const putRequest = (url, params) => {
    return axios({
        method: 'put',
        url: `${base}${url}`,
        data: params,
        transformRequest: [function (data) {
            let ret =  JSON.stringify(data);
            return ret
        }],
        headers: {
            'Content-Type': 'application/json'
        }
    });
}

export const deleteRequest = (url, params) => {
    return axios({
        method: 'delete',
        data: params,
        url: `${base}${url}`
    });
}

2.4使用

<script>
    //先引入
    import {getRequest,deleteRequest,postRequest,putRequest} from "../utils/api";

    //~~省略部分代码，直接展示调用部分~~
    postRequest("/api/train-module-message/save", this.trainModuleMessage)
                        .then(rsp => {
                            console.log(rsp);
                        })

    putRequest("/api/train-module-message/update", this.trainModuleMessage)
                        .then(rsp => {
                            console.log(rsp); 
                        })

    getRequest("/api/train-module-message/getOne/" + this.currentTrainModuleMessageId)
                    .then(rsp => {
                        console.log(rsp.data);
                    })

    deleteRequest("/api/train-module-message/delete/"+row.trainModuleMessageId)
                    .then(rsp => {
                    console.log(rsp.data);
                })

</script>