axios安装与基本方法

安装：

1.npm安装：

npm install axios

2.在主入口文件main.js中引用：

import axios from 'axios'

Vue.use(axios);

3.在组件文件中的methods里使用：

<template>
    <section class="jumbotron">
        <h3 class="jumbotron-heading">Search Github Users</h3>
        <div>
            <input type="text" placeholder="enter the name you search" v-model="keyWord"/>&nbsp;
            <button @click="searchUsers">Search</button>
        </div>
    </section>
</template>

<script>
    import axios from 'axios'
    export default {
        name:'Search',
        data() {
            return {
                keyWord:''
            }
        },
        methods: {
            searchUsers(){
                //请求前更新List的数据
                this.$bus.$emit('updateListData',{isLoading:true,errMsg:'',users:[],isFirst:false})
                axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
                    response => {
                        console.log('请求成功了')
                        //请求成功后更新List的数据
                        this.$bus.$emit('updateListData',{isLoading:false,errMsg:'',users:response.data.items})
                    },
                    error => {
                        //请求后更新List的数据
                        this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})
                    }
                )
            }
        },
    }
</script>

常用API：

1.get请求：查询数据，直接从后台获取数据，参数写在地址（url）里，第一个参数是url（API的一个地址，由后端提供）；

2.post请求：添加数据，一般在填写表单并提交时，要将输入的数据写在数据库里，参数一般放在对象中；

3.put请求：修改数据

4.delete请求：删除数据

使用方式示例

1.执行get数据请求

axios.get('url',{
    params:{
        id:'接口配置参数（相当于url?id=xxxx）'，
    },
})
.then((res)=>{
    console.log(res);   //  处理成功的函数 相当于success
})
.catch((error)=>{
    console.log(error)  //  错误处理 相当于error
})

2.执行post数据发送

const data = {
    name:'张三',
    age:23
}
axios.post('url',data)
.then((res)=>{
    console.log(res);   //  处理成功的函数 相当于success
})
.catch((error)=>{
    console.log(error)  //  错误处理 相当于error
})

3.执行delete 数据发送

//  如果服务端将参数作为java对象来封装接受
axios.delete('demo/url', {
    data: {
        id: 123,
        name: 'Henry',
    },
    timeout: 1000,
})
//  如果服务端将参数作为url参数来接受，则请求的url为:www.demo/url?a=1&b=2形式
axios.delete('demo/url', {
    params: {
        id: 123,
        name: 'Henry',
    },
    timeout: 1000
})

4.执行put 数据发送

axios.put('demo/url', {
    id: 123,
    name: 'Henry',
    sex: 1,
    phone: 13333333
})

示例摘自：

axios使用方法 - 简书