VUE在main.js里设置全局axios请求的配置
//下载包
npm i axios -S
在main.js配置如下
import axios from 'axios'
//配置共同的端口号和域名,后期代码中直接写接口就行,例如/user,/books
axios.default.baseURL='请求根路径'
//在vue实例对象的原型上添加这个属性
//今后,在每个.vue组件中要发起请求,直接调用this.axios.x××
Vue.prototype.axios=axios
在组件中使用
<template>
<div>
<button @click="qingqiu">点击按钮发请求</button>
</div>
</template>
//不在原型中添加axios属性的写法(不推荐,建议看下面这个)
/*
<script>
import axios from 'axios'
export dafault {
methods:{
async qingqiu(){
const {data:res}=await axios.get('请求完整地址')
console.log(res)
}
}
}
</script>
*/
//第二种写法,在原型上添加axios属性,相当于全局配置了axios,全局都能直接使用
<script>
export dafault {
methods:{
async qingqiu(){
//this指向原型,通过打点调用里面的axios即可
const {data:res}=await this.axios.get('请求接口')
console.log(res)
}
}
}
</script>
把axios挂载到 vue原型上 有个缺点------无法实现API接口的复用
当想要在多个组件发送同样的请求时,每个组件都要写同样的按钮和方法(都要重新调用一下API接口) ,不利于复用
实现axios方法的复用
第一步:封装公共接口
在scr目录下创建一个utils文件夹,里面创建一个request.js模块,添加如下代码
//导入axios
import axios from 'axios'
const request = axios.create({
//指定请求的根路径
baseURL:'http://127.0.0.1'
})
export default request
//使用方法,在需要使用的模块导入当前的公共接口模块
//通过request.get()/request.post(),发请求,url路径直接写各个接口名即可,无需写全名了
拓展(后面下面的第二步才是封装接口的步骤):
axios.create()是添加了自定义配置的新的axios例如: 用axios发送请求: axios({ method:'POST', url:'http://localhost:8000/login', data }) 用axios.create()创建一个新的axios发请求: cosnt requset = axios.create({ //基础路径 baseURL:'http://localhost:8000/' }) requset({ method:'POST', url:'/login', data })
好处:、
1.可以简化路径写法
2.当基础路径发生变化时方便修改,有利于维护
第二步,封装公共的模块步骤
在src目录下创建API文件夹,然后存放不同的api模块,例如文章模块的api的请求,这里封装acticleAPI.js模块
内容如下
//在实际开发有各种各样的,例如评论相关的增删改查,用户信息的,文章相关的等等模块
//这里演示文章相关api的封装,其他根据需求也可以如此封装
//文章相关api都在此模块
//1.导出方法(方法名要见名知意)(向外按需导出)
//下面的request为公共接口的模块向外导出的,因此需要导入request.js公共模块,不然用不了
import request from '@/公共模块路径'
export const getArticleListAPI = function(参数值一,参数值二){
return request.get('/articles',{
//请求参数
params:{
参数名一:参数值一,
参数名二:参数值二
}
})
}
第三步调用封装好的方法发请求
在需要使用的模块,导入上面的公共接口和需要用的模块,代码如下
<script>
//按需导入封装好的方法
//{需要用的方法}
import { getArticleListAPI } from '@/方法路径'
export default {
name:'当前模块名'
data(){
return{
page:1,
limit:5
}
},
methods:{
async 方法名(){
const {data:res} = await getArticleListAPI(this.page,this.limit)
console.log(res)//数据名
}
}
}
</script>
封装完后,以后多个组件需要调用相同的请求,就重复第三步操作,按需引入即可