Vue学习-axios发送http请求

Autooooooo

发布于 2020-11-09 10:05:09

1.8K0

发布于 2020-11-09 10:05:09

文章被收录于专栏：Coxhuang

axios

#1 环境

"vue": "^2.5.2",
"axios": "^0.19.0",
"vue-axios": "^2.1.4",
"vue-router": "^3.0.1"

前提 : 一个基本的Vue模板

#2 简单的axios

在main.js添加以下代码:

...
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios);
axios.defaults.baseURL = "http://127.0.0.1:8000/"; // 接口ip:端口号
...

vue代码:

<template>
	<div>
		<div @click="btnClick()">点击</div>
		<div @click="btnClick2()">POST点击</div>
	</div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        data () {
            return {}
        },
        methods:{
            btnClick:function(){
                this.axios.get('/api/user/list-user/').then((response)=>{
                    console.log(response.data)
                }).catch((error)=>{
                    console.log(error)
                })
            },
            btnClick2:function(){
                this.axios.post(
                    '/api/user/create-user/',
                    {
                        "username" : "cox2",
                        "password" : "cox123456",
                    }
                ).then((response)=>{
                    console.log(response.data)
                }).catch((error)=>{
                    console.log(error.response.status)
                })
            },
        },
    }
</script>

后端接口:

使用:

axios简单使用结束 !!!

#3 接口模块化处理

为了更方便的管理前端项目代码请求后端的接口,需要将所有的后端api封装到一个文件中,具体操作如下:

在src下新建utils目录,在该目录下新建axios.js文件,文件内容如下:

import axios from 'axios' // 导入node_modules里的axios
import qs from 'qs'

axios.defaults.baseURL = "http://127.0.0.1:8000/"; // 后端接口 ip:port

axios.interceptors.request.use((request) => {
    //在发送请求之前做某件事
    console.log("axios");
    if(request.method  === 'post'){
        request.data = qs.stringify(request.data);
    }
    return request;
},(error) =>{
    console.log('错误的传参');
    return Promise.reject(error);
});

export default axios // 导出axios

在src下新建api目录,在该目录下新建index.js和api.js文件,文件内容如下: index.js

import api_all from './api'

export default {
    api_all
}

api.js

import axios from '@/utils/axios'

const api_all = {
    // 获取所有用户列表
    get_test_list() {
        return axios({
            url: '/api/test/list/',
            method: 'GET',
        })
    },
    create_test(dog) {
        return axios({
            url: '/api/test/create/',
            method: 'POST',
            data: {
                dog: dog
            },
        })
    },
};

export default api_all

修改main.js

...
import axios from "./api/";
Vue.prototype.$api = axios;

// import axios from 'axios'
// import VueAxios from 'vue-axios'
// Vue.use(VueAxios,axios);
// axios.defaults.baseURL = "http://127.0.0.1:8000/";
...

在vue代码使用如下:

<template>
	<div>
		<div @click="btnClick()">点击</div>
		<div @click="btnClick2()">POST点击</div>
		<div @click="btnClick3()">GET点击</div>
		<div @click="btnClick4()">POST点击</div>
	</div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        data () {
            return {}
        },
        methods:{
            // btnClick:function(){
            //     this.axios.get('/api/user/list-user/').then((response)=>{
            //         console.log(response.data)
            //     }).catch((error)=>{
            //         console.log(error)
            //     })
            // },
            // btnClick2:function(){
            //     this.axios.post(
            //         '/api/user/create-user/',
            //         {
            //             "username" : "cox2",
            //             "password" : "cox123456",
            //         }
            //     ).then((response)=>{
            //         console.log(response.data)
            //     }).catch((error)=>{
            //         console.log(error.response.status)
            //     })
            // },
            btnClick3:function(){
                this.$api.api_all.get_test_list().then((response)=>{
                    console.log(response.data)
                }).catch((error)=>{
                    console.log(error.response.status)
                })
            },
            btnClick4:function(){
                this.$api.api_all.create_test(
                    "小肥柴"
                ).then((response)=>{
                    console.log(response.data)
                }).catch((error)=>{
                    console.log(error.response.status)
                })
            },
        },
    }
</script>

后端接口: