axios封装post和get

axios:基于promise用于浏览器和node.js是http客户端,于向后台发起请求的，还有在请求中做更多是可控功能。
首先讲讲axios的get请求。

axios.get('/user')
    .then( (response) => {
        console.log(response);
    })
    .catch( (error) => {
        console.log(error);
    });

get请求如何传参想必大家应该都知道的
一是可以拼接在url上

axios.get('/user?ID=12345')
.then( (response) => {
    console.log(response);
})
.catch( (error) => {
    console.log(error);
});

二是axios可以以键值对的形式放入params对象中

axios.get('/user', {
    params: {
        ID: 12345
    }
})
.then( (response) => {
    console.log(response);
})
.catch( (error) => {
    console.log(error);
});

axios的post请求
axios的post请求参数可以直接在请求地址后加在一个对象中

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
})
.then( (response) => {
    console.log(response);
})
.catch( (error) => {
    console.log(error);
});

今天讲的如何将axios的post请求与get请求封装在一起利用的是axios(config)
1、get请求

axios({
    methods: 'get',
    url: '/user',
    params: {
        ID: '1234'
    }
})
.then( (response) => {
    console.log(response);
})
.catch( (error) => {
    console.log(error);
});

2、post请求

axios({
    methods: 'post',
    url: '/user',
    data: {
        ID: '1234'
    }
})
.then( (response) => {
    console.log(response);
})
.catch( (error) => {
    console.log(error);
});

根据上面的对比大家应该可以清楚看出get请求与post请求的差异在哪了，那么我们只要将差异点摘出来就OK了

import axios from 'axios';

export default function(url, method, params = {}) {
    // 首先判断是get请求还是post请求
    let data = method.toLocaleLowerCase() === 'get' ? 'params' : 'data';
    return axios({
        method,
        url,
        [data]: params // 差异点在于data的值
    }).then((res) => {
        return Promise.resolve(res.data);
    }).catch((err) => {
        return Promise.reject(err);
    })
}

利用上面的函数我们就可以轻松利用这个函数进行axios请求了，今天就讲这么多，希望对大家有所帮助。

axios中文文档：

https://www.kancloud.cn/yunye/axios/234845

vue封装axios做公共组件:

https://www.jb51.net/article/145341.htm
https://blog.csdn.net/csl125/article/details/85070597