文章目录
一、axios请求接口
1 下载
npm install axios -S
2 引入
import axios from 'axios'
3 使用
axios.get()
axios.post()
axios({
url:'请求url地址',
method:"请求的方法",
data:'post传值方式'
params:'get传值方式',
}).then(res=>{
console.log( res );//后端给前端返回的数据
})
二、axios二次封装
为什么要进行axios的二次封装＋解耦？
// 以下来自官方文档
默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath（baseURL） 为 /my-app/。
- 请求的url地址统一管理：譬如在一个项目中需要频繁发起请求获得数据，而请求的接口经常为：【http://testapi.xuexiluxian.cn/XXX/XXX】,即通常只有后面【/XXX/XXX】是变化的，而前面【http://testapi.xuexiluxian.cn】是不变的，如果每次都重复写，不仅麻烦，还不利于项目的维护，所以我们需要给他一个【baseURL:‘http://testapi.xuexiluxian.cn’】，在后续的请求过程中只需要给定后面变化的部分【url:‘/api/slider/getSliders’】即可。
- 某些接口需要传递headers
- 可以统一配置请求拦截器＋响应拦截器
该【二、】部分在utils/request.js目录下
1. 下载axios
npm install axios -S
2. 引入axios
import axios from 'axios';
3. 创建axios对象
const service = axios.create({
baseURL:'http://testapi.xuexiluxian.cn'
});
4. 请求拦截器
在请求拦截器中 ==> 前端给后端发送数据【没有到后端 】
service.interceptors.request.use(config => {
console.log( 1 );
return config;
}, error => {
Promise.reject(error);
});
5. 响应拦截器
在响应拦截器中 ==> 后端给前端返回数据【前端到后端了】
service.interceptors.response.use(
(response) => {
return response.data.data;
},
error => {
return Promise.reject(new Error(error.response.data))
}
)
//导出封装好的service，后续只要使用service发送请求就会通过上诉请求拦截器和响应拦截器
export default service
三、api解耦
为什么要进行api解耦？
在 utils 目录下新建 api 文件夹，在 api 下新建 course.js。
course.js中代码如下：
import request from '@/utils/request'
export function getSliders(){
return request({
url:'/api/slider/getSliders'
})
}
完成后在后续便可以十分简易的设置多个请求如：
四、使用
在这里 vue2 中使用created钩子，vue3 中使用onMounted钩子调用解耦好的 getSliders 的 api 即可。
vue2: 通常在created钩子中执行异步操作，因为此时数据已经可以被访问，但组件尚未挂载。
vue3: 推荐在onMounted钩子中执行异步操作，因为此时组件已经挂载到DOM，可以进行DOM操作。
<script type="text/javascript">
import { getSliders } from '@/utils/api/course'
export default{
data (){
return {
list:[]
}
},
created(){
getSliders().then(res=>{
console.log( res )
})
}
}
</script>