ToB企服应用市场:ToB评测及商务社交产业平台
标题:
安装设置axios
[打印本页]
作者:
络腮胡菲菲
时间:
2024-8-1 14:37
标题:
安装设置axios
这是一个TypeScript+vue3的实战项目，完成创建vue项目后，接下来安装设置axios。
一、axios是干什么的
简单来说，Axios 是一个 HTTP 客户端库,可以用来在欣赏器和 Node.js 中发送 HTTP 哀求,处理数据等。
二、安装
npm install axios
复制代码
三、全局设置
在src目录下，创建一个axios目录管理axios设置文件，在axios目录下创建axiosConfig.ts，内容如下：
import axios from "axios";
//创建一个axios实例对象
const http = axios.create({
});
//设置请求拦截器(回调函数)
http.interceptors.request.use((req)=>{
return req;
})
//设置响应拦截器
http.interceptors.response.use((res)=>{
return res;
})
//把http实例对象暴露出去
export default http;
复制代码
四、挂载到项目上
将http对象挂载到app上
import axios from './axios/axiosConfig';
//将axios挂载到app这个实例上
app.config.globalProperties.$http=axios;
复制代码
五、发送一个axios哀求验证一下
在src文件夹下，创建一个test文件夹用于测试，添加test.vue文件，内容如下：
<template>
<div>
</div>
</template>
<script lang="ts">
import {defineComponent, getCurrentInstance} from 'vue';
export default defineComponent({
name:'myTest',
setup(){
const {proxy}: any = getCurrentInstance();
//发送axios请求
function ajaxTest(){
proxy.$http.get('https://images.pexels.com/photos/2014422/pexels-photo-2014422.jpeg')
.then((res: any)=>{
console.log(res);
})
.catch((error: any)=>{
console.log(error);
});
}
//发送请求，直接调用
ajaxTest();
}
})
</script>
<style scoped>
</style>
复制代码
再将上面的代码引入项目中，在HomeView.vue文件中，引入、注册、使用。这是修改后的HomeView.vue:
<template>
<div class="home">
<!-- <img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>-->
</div>
<my-test></my-test>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import myTest from '../test/test.vue'
export default defineComponent({
name: 'HomeView',
components: {
myTest,
},
props: {
msg: String,
}
});
</script>
复制代码
六、运行结果
还可以刷新试试：
Powered by Discuz! X3.4
