封装axios请求

/**
 * 请求管理
 */
import axios from 'axios'
import qs from 'qs'
import { globalHost } from '@/constant'

const app = globalHost;

//全局的axios默认值
axios.defaults.timeout = '';               //请求超时时间,过期将中断请求
axios.defaults.withCredentials = false;    //跨越请求是否需要携带凭证

//get请求
export const getRequest = (url = '', params, dataFormat = 'json') => {
    return axios({
        url: `${app}${url}`,     //请求地址
        method: 'get',           //请求方式
        params: params,          //请求携带的数据(入参)
        // baseURL: '/byProxy',     //自动加在url前面
        headers: {               //自定义请求头
            'Content-Type': `${dataFormat == 'form' ?
                'application/x-www-form-urlencoded;charset=UTF-8' :
                'application/json'
                }`,
        },
        transformResponse: [     //在传递给then/catch前对数据做处理
            function (response) {
                //对响应的数据做处理
                return response;
            }
        ],
    })
}
//post请求
export const postRequest = (url = '', data, dataFormat = 'json') => {
    return axios({
        url: `${app}${url}`,     //请求地址
        method: 'post',           //请求方式
        data: data,              //请求携带的数据(入参)
        //baseURL:'byProxy',     //自动加在url前面
        headers: {               //自定义请求头
            'Content-Type': `${dataFormat == 'form' ?
                'application/x-www-form-urlencoded;charset=UTF-8' :
                'application/json'
                }`,
        },
        transformRequest: [      //向服务器发送数据之前处理数据(仅用于PUT、POST、PATCH)
            function (data, headers) {
                //请求携带的数据转为json
                if (dataFormat == 'json') {
                    data = qs.stringify(data);
                }
                return data;    //此函数必须返回字符串或者数组
            }
        ],
        transformResponse: [     //在传递给then/catch前对数据做处理
            function (response) {
                //对响应的数据做处理
                return response;
            }
        ],
    })
}
在 Vue.js 开发中,封装 Axios 请求是一种常见的做法,通常是为了简化全局的 API 调用,避免在每个组件中都重复引入 Axios 并设置相同的配置。以下是创建一个简单的 Axios 封装实例: ```javascript import axios from 'axios'; import { MessageBox } from 'element-ui'; // 创建一个 Vue 插件 export default { install(Vue) { // 创建一个 Vue 实例的方法 Vue.prototype.$axios = axios.create({ baseURL: process.env.BASE_API, // 当前应用的基础URL timeout: 5000, // 设置默认超时时间 headers: { 'Content-Type': 'application/json', // 默认请求头 }, }); // 添加全局错误处理 Vue.prototype.$httpError = (error) => { if (error.response) { console.log(error.response.data); MessageBox.error(error.response.data.message || error.response.status); } else { console.error('未知错误', error); } }; // 错误拦截器 Vue.prototype.$axios.interceptors.response.use( response => response, error => { this.$httpError(error); return Promise.reject(error); } ); // 请求拦截器 Vue.prototype.$axios.interceptors.request.use( config => { // 在发送请求之前做些什么 return config; }, error => { // 对请求错误做些什么 this.$httpError(error); return Promise.reject(error); } ); }, }; ``` 通过这种方式,你在 Vue 组件中就可以像下面这样轻松地发送请求了: ```vue methods: { fetchData() { this.$axios.get('/api/data').then(response => { // 处理成功响应 }).catch(this.$httpError); } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值