axios 使用：axios的封装（vue/react皆可用）

最新推荐文章于 2025-04-25 02:58:45 发布

不管，我要跨世纪

最新推荐文章于 2025-04-25 02:58:45 发布

阅读量169

点赞数

文章标签： ajax

本文链接：https://blog.youkuaiyun.com/gengtieguang/article/details/108568077

版权

本教程介绍如何使用axios进行Ajax请求的封装，内容包括axios的基本使用、请求方式如GET和POST，以及适用于Vue和React应用的封装方法。

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

axios 使用

axios是基于Ajax的封装，有两种格式

1.安装 npm i axios -S
2.引入 import axios from ‘axios’
3.请求

请求方式：Get / Post

第一种：


    axios.get('接口地址').then(data=>console.log(data))

    axios.post('接口地址',{user:'欧阳栓柱',pwd:'123456'}).then(data=>console.log(data))

第二种：


    axios({ method: 'post',url: '/user/12345',data: {firstName: 'Fred'}})

    axios({ method:'get',url: '/user/12345',params: {firstName: 'Fred'}})

axios的封装（vue/react皆可用）

import axios from 'axios'

export default function Http(Array,success=res=>alert(res.msg),error=msg=>alert(msg)){
    let configData = {},
        type = Array[0]!=="GET"?"data":'params';
        configData.method = Array[0]
        configData.url = Array[1]
        configData[type] = Array[2]?Array[2]:{}
       
        axios(configData).then(data=>{
            const {code,msg} = data.data ;
            if(code===1){
                success(data.data)
                return
            }
            error(msg)
        }).catch(error=>{
            if(error.response&&error.response.status === 404) return alert("404 接口不存在")
            if(error.response&&error.response.status === 500) return alert("500 服务端错误")
        })
}