axios封装post、get请求，axios三种请求案列

首先安装axios 和 qs 库。以便用于post向后端发送FormData数据格式。

在src目录下，新建一个request目录，
创建http.js，配置域名和自定义拦截器等

import axios from 'axios';
import qs from 'qs';
import { Toast } from 'vant';//可根据实际项目引用，第三方库（若api报错，则弹窗提示信息）

const successCode = 1;//接口成功响应状态码，具体以项目为准

// 创建axios实例
const service = axios.create({
    baseURL: 'http://www.abc.com', // api的base_url，以实际项目为准
    timeout: 5000, // 请求超时时间
});

// request拦截器
service.interceptors.request.use(config => {
    // Do something before request is sent
    // if (store.getters.token) {
    //     config.headers['token'] = getToken() // 让每个请求携带token--['token']为自定义key 请根据实际情况自行修改
    // }
 
    return config
}, error => {
    // Do something with request error
    console.log(error); // for debug
    Promise.reject(error)
});

// respone拦截器
service.interceptors.response.use(
    response => {
        const res = response.data;
        // if the custom code is not 20000, it is judged as an error.
        if (res.code !== successCode) {
            // Toast.fail(res.msg);
            Toast(res.msg);
            return Promise.reject(new Error(res.msg || 'Error'))
        } else {
            return res
        }
    },
    error => {
        console.log('err' + error);// for debug
        Toast.fail(error.message);
        return Promise.reject(error)
    });

export default service

/**
 * get 请求方法
 * @param url
 * @param params
 * @returns {Promise}
 */
export function get(url, params = {}) {
    return new Promise((resolve, reject) => {
        service
            .get(url, {
                params: params
            })
            .then(response => {
                resolve(response)
            })
            .catch(err => {
                reject(err)
            })
    })
}

/**
 * post 请求方法
 * @param url
 * @param data
 * @returns {Promise}
 */
export function post(url, data = {}) {
    return new Promise((resolve, reject) => {
        service.post(url, qs.stringify(data)).then(
            response => {
                // console.log(response.data.code)
                resolve(response)
            },
            err => {
                reject(err)
            }
        )
    })
}
 

第一种：

在request目录另新建一个js文件，文件名可以根据项目需求命名，例如：user.js，可以表示用户相关操作

import request from './http.js'
import qs from 'qs';
//得到最新一条对话信息列表
export function getLastMessage(params) {
    return request({
        url: '/app/test/getLastMessage.html',
        method: 'post',
        data:qs.stringify(params)
    });
}


export function getLastMessageGet(params) {
    return request({
        url: '/app/websocket/test/getLastMessageGet.html',
        method: 'get',
        params
    });
}

调用，src/views/user/Index.vue

<script>
    import { getLastMessage,getLastMessageGet } from '../../request/user.js';//引入文件

    //调用此方法即可
    // post
    getLastMessage({
                        page:1,
                    }).then(response => {
                      console.log(response )
                    }).catch(error => {
                        console.log(error)
                    });

  //get
  getLastMessageGet ({
                        page:1,
                    }).then(response => {
                      console.log(response )
                    }).catch(error => {
                        console.log(error)
                    });


</script>
 

第二种：

在main.js 全局注册http.js 封装的 post和get方法

import { post, get} from './request/http.js'
// 定义全局变量
Vue.prototype.$post = post;
Vue.prototype.$get = get;

调用，src/views/user/Index.vue

<script>
 this.$post('/app/websocket/test/getLastMessage.html', {
                        page: 1
                    }).then(response => {
                        console.log(response )
                    }).catch(err => {
                        console.log(err)
                    });

this.$get('/app/websocket/test/getLastMessageGet.html', {
                        page: 1
                    }).then(response => {
                        console.log(response )
                    }).catch(err => {
                        console.log(err)
                    });
</script>

第三种：经典jquery写法

在main.js 全局注axios和qs

import axios from 'axios';
import qs from 'qs';
Vue.prototype.$myaxios = axios;
Vue.prototype.$myqs = qs;

<script>
                  this.$myaxios({
                        method: 'get',
                        url: 'http://www.abc.com/app/test/getLastMessageGet.html',
                        params:{
                            page: 1,
                            uid: 666
                        }
                    }).then((res) => {
                        if (res.status === 200){
                        }
                        console.log(res)
                    }).catch(err => {
                            console.log(err)
                    });


                    this.$myaxios({
                        method: 'post',
                        url: 'http://www.abc.com/app/test/getLastMessage.html',
                        data:this.$myqs.stringify( {
                            page:1,
                            uid: 666
                        })
                    }).then((res) => {
                        if (res.status === 200){
                        }
                        console.log(res)
                    }).catch(err => {
                            console.log(err)
                    });

</script>