axios的使用方式有几种?

axios的使用方式有几种?

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

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

使用方法

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

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

import axios from "axios"
// 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 =>{
//处理语句
})

第三种 使用vue-axios

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

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

使用方法

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

你可能感兴趣的:(vue,面试题,vue.js,javascript)