当前位置: 移动技术网 > IT编程>脚本编程>vue.js > axios 使用:axios的封装(vue/react皆可用)

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

2020年09月01日  | 移动技术网IT编程  | 我要评论
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

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网