欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

axios 使用:axios的封装(vue/react皆可用)

程序员文章站 2022-06-21 20:08:27
axios 使用1.安装 npm i axios -S2.引入 import axios from ‘axios’3.请求 axios.get('接口地址').then(data=>console.log(data)) axios.post('接口地址',{user:'欧阳栓柱',pwd:'123456'}).then(data=>console.log(data))...

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 服务端错误")
        })
}

本文地址:https://blog.csdn.net/gengtieguang/article/details/108568077

相关标签: ajax