axios的使用方式有几种？

axios的使用方式有几种？

第一种 ：直接挂载在原型上

import axios from "axios"
Vue.prototype.$axios = axios ;
//设置请求的根路径
axios.defaults.baseURL = 'https://www.baidu.com'
1
2
3
4

使用方法

this.$axios.get('param').then(res =>{
//处理语句
})
this.$axios.post('param',{name:'xx'}).then(res =>{
//处理语句
})
1
2
3
4
5
6

第二种 ：将所有接口写一个单独的接口.js文件

import axios from "axios"
// 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
12
13

使用方法

import {getName} from 'api.js'
getName(params).then(res =>{
//处理语句
})
1
2
3
4

第三种 使用vue-axios

首先引用安装 npm install --save axios vue-axios
在入口文件main.js引用

import   axios  from  'axios'
import  VueAxios from  'vue-axios'
Vue.use(VueAxios,axios);
1
2
3

使用方法

this.axios.get('../getNewsList').then((response)=>{this.newsList=response.data.data;})
.catch((response)=>{console.log(response);})
1
2