fetch封装Axios请求

本文介绍了一种使用Axios库封装HTTP请求的方法,通过封装GET和POST请求,实现了参数序列化、默认请求头设置及错误处理等功能,提高了代码的可读性和复用性。

用fetch封装Axios请求,具体如下:

import qs from “qs”
import axios from “axios”

**//封装Axios get/post请求**
export function fetch(url, options) {
    let opt = options || {}
    let baseParam = {  UserName: store.getters.userInfo.UserName, token: store.getters.token }
    let data = Object.assign({  t: new Date().getTime() }, opt.data,  baseParam )
    return new Promise((resolve, reject) => {
        Axios({
                method: opt.type || 'post',
                url: url,
                param: opt.type === 'get' ? Object.assign({  t: new Date().getTime() }, opt.data,  baseParam  ) :  {},
                //判断是否有自定义头部,以对参数进行序列号.不定义头部,默认对参数序列号为查询字符串
                data: (opt.header ? data : qs.stringify(data)) || {},
                responseType: opt.dataType || 'json',
                //设置默认请求头
                header: opt.header || {'Content-Type': 'application/x-www-form-urlencoded;charset-UTF-8'}, //application/json
                //是否隐藏loading
                hideLoading: options.hideLoading ? true : false
            })
            .then(response => {
                resolve(response)
            })
            .catch(error => {
                reject(error)
            })
    })
}
在 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、付费专栏及课程。

余额充值