axios 在 Vue 中的三种使用方式_vue引入axios的方式

axios 在 Vue 中的使用方式

axios 是一个库，不是 Vue 中的第三方插件，所以使用时不能通过 Vue.use() 来安装。

绑定到原型链

一般在项目的入口文件 main.js 中引入并绑定到原型链上

// main.js
import Vue from 'vue'
import axios from 'axios'

// 绑定到原型链上
Vue.prototype.$http = axios
axios.defaults.baseURL = 'https://www.baidu.com/'  // 还可以设置请求的根路径
1
2
3
4
5
6
7

使用方法

this.$http.get('person').then(res => {
    // some code ...
})
this.$http.post('login', { name: 'cez', psw: '123' }).then(res => {
    // some code ...
})
1
2
3
4
5
6

vue-axios

如果想让 axios 和插件一样可以使用 Vue.use() 安装，可以通过 vue-axios 插件来实现。

官方网址

在项目入口文件 main.js 引入并配置

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)
1
2
3
4
5

通过 vue-axios 就可以实现使用 Vue.use() 来安装 axios。

使用方法

Vue.axios.get('login').then(res => {
    // some code ...
})

this.axios.get('login').then(res => {
    // some code ...
})

this.$http.get('login').then(res => {
    // some code ...
})
1
2
3
4
5
6
7
8
9
10
11

第三种方法

把所有 api 接口封装到一个文件 api.js

// api.js
import axios from 'axios'

// 导出 api 接口
export function getName (params) {
    return axios({
        url: '请求路径',
        method: '请求方法',
        params,   // 请求参数
    })
}
1
2
3
4
5
6
7
8
9
10
11

使用方法

import { getName } from 'api.js'   // 导入接口

getName(params).then(res => {
    // some code ...
})
1
2
3
4
5

一般都使用这种方法，封装性好，后期方便维护。