axios 在 Vue 中的三种使用方式

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/'  // 还可以设置请求的根路径

使用方法

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

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)

通过 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 ...
})

第三种方法

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

// api.js
import axios from 'axios'

// 导出 api 接口
export function getName (params) {
    return axios({
        url: '请求路径',
        method: '请求方法',
        params,   // 请求参数
    })
}

使用方法

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

getName(params).then(res => {
    // some code ...
})

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

本文地址：https://blog.csdn.net/CEZLZ/article/details/108123007