Axios方法封装_封装axious .catch-优快云博客

本文链接：https://blog.youkuaiyun.com/Sky_Bug/article/details/110451750

博客主要介绍了 axios 的 GET、POST、UNPOLD 等封装方法，这些内容与信息技术领域相关，能帮助开发者更好地使用 axios 进行数据交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

axios 的 GET/POST/UNPOLD 等封装方法

1. 先引入axios npm安装  :    npm install axios
2. 在项目中新建一个公共组件 utils
3. 引入  import axios from "axios"
4. 稍微弄一下基本配置  
axios.defaults.baseURL = "";  //不设置就是空
axios.defaults.timeout = 3000; //报错误时间

5    Get方法     .//  @url:String : 请求路径  params:Object | string 请求参数
function get(url,params={}){
    return new Promise((res,rej)=>{
        axios({
            method : "get", //不写默认get
            url,
            params
        }).then(data=>{
            res(data)
        }).catch(err=>{
            rej(err)
        })
    })
}

6.//  post的响应方式就是换成data
function post(url,data={}){
    return new Promise((res,rej)=>{
        axios({
            method : "post", //不写默认get
            url,
            data
        }).then(data=>{
            res(data)
        }).catch(err=>{
            rej(err)
        })
    })
}



// 封装包含上传内容的方法
// @url:上传地址
// @data:上传数据
function upload(url,data={}){
    return new Promise((res,rej)=>{
        let form = new FormData();
        for (var key in data) {
          // append:向表单实例添加数据的方法
          // key: 数据的名称
          // value: 数据的值
          form.append(key,data[key]);
        }
        axios({
            method:'post',
            url,
            data:form,
            headers:{
                "Content-Type": "multipart/form-data"
            }
        }).then(data=>{
            res(data)
        }).catch(err=>{
            rej(err)
        })
    })
}


export default{
    get,
    post,
    upload
}