fetch封装Axios请求

最新推荐文章于 2025-02-18 09:07:20 发布

Software攻城狮

最新推荐文章于 2025-02-18 09:07:20 发布

阅读量353

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_43799793/article/details/97961295

本文介绍了一种使用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)
            })
    })
}