vue中axios的使用方法

axios安装

npm install axios -s
1

man.js中引入并注册全局

vue2.0

import Vue from 'vue'
import App from './App.vue'
Vue.prototype.$ajax = axios;
new Vue({
    router,
    render: h => h(App)
}).$mount('#app')
1
2
3
4
5
6
7

vue3.0

import axios from "axios";
import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);
app.config.globalProperties.$ajax = axios;
app.mount("#app");
1
2
3
4
5
6

全局注册后可以使用this.$ajax来调用请求，命名方式因人而异，下面例子中还是axios。

axios请求

axios本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。（摘自百度）

get请求

1、不带参数

写法一

axios.get('url').then((res) => {
    console.log(res)
}).catch(err => {
    console.log(err)
})
1
2
3
4
5

写法二 详细严谨写法

axios({
    method: 'get',
    url: 'url',
}).then((res) => {
    console.log(res)
}).catch(err => {
    console.log(err)
})
1
2
3
4
5
6
7
8

写法三 默认（即是get写法）极简写法

axios('url').then((res) => {
    console.log(res)
}).catch(err => {
    console.log(err)
})
1
2
3
4
5

2、带参数（params）

写法一 （多个参数可使用&链接）

axios.get('url?queryKey=' + queryKey)//等价于('url', { params: { queryKey: queryKey } })
    .then((res) => {
        console.log(res)
    }).catch(err => {
        console.log(err)
    })
1
2
3
4
5
6

写法二 详细严谨写法

axios({
    method: 'get',//这个请求方式不区分大小写，甚至不区分键名和顺序 也可省略不写
    url: 'url',
    params: {
        queryKey: 1// 若参数名和拿到变量名一致可简写为 queryKey
    },
}).then((res) => {
        console.log(res)
    }).catch(err => {
        console.log(err)
    })
1
2
3
4
5
6
7
8
9
10
11

写法三 默认（即是get写法）极简写法

axios('url?queryKey=' + queryKey).then((res) => {
    console.log(res)
}).catch(err => {
    console.log(err)
})
1
2
3
4
5

post请求

1、不带参数

写法一

axios.post('url').then((res) => {
    console.log(res)
}).catch(err => {
    console.log(err)
})
1
2
3
4
5

写法二 此时的键名都不可改写

axios({
    methods: 'post',//这个请求方法名不区分大小写，不区分顺序 但必须要写
    url: 'url',
}).then((res) => {
    console.log(res)
}).catch(err => {
    console.log(err)
})
1
2
3
4
5
6
7
8

2、带参数（params）

写法一

axios.post('url?queryKey=' + queryKey)
    .then((res) => {
        console.log(res)
    }).catch(err => {
        console.log(err)
    })
1
2
3
4
5
6

写法二 此时的键名都不可改写

axios({
    method: 'post',
    url: 'url',
    params: {
        queryKey: queryKey// 若参数名和拿到变量名一致可简写为 queryKey
    },
}).then((res) => {
    console.log(res)
}).catch(err => {
    console.log(err)
})
1
2
3
4
5
6
7
8
9
10
11

3、带请求体（data）

写法一

axios.post('url', queryKey)
    .then((res) => {
        console.log(res)
    }).catch(err => {
        console.log(err)
    })
1
2
3
4
5
6

写法二 此时的键名都不可改写

axios({
    method: 'post',
    url: 'url',
    data: {
        one: 1,
    }
}).then((res) => {
    console.log(res)
}).catch(err => {
    console.log(err)
})
1
2
3
4
5
6
7
8
9
10
11

当然post请求中参数和请求体也可以同时带，不过还是建议先打一顿后端同事。

注释：

url：接口（请求）地址/请求行；（字符串）
method：请求方式；（字符串）
params：请求参数；（对象）
data：请求体；（对象）

基础ajax请求知识请参考：传送门