安装设置axios

这是一个TypeScript+vue3的实战项目，完成创建vue项目后，接下来安装设置axios。

  
一、axios是干什么的

简单来说，Axios 是一个 HTTP 客户端库,可以用来在欣赏器和 Node.js 中发送 HTTP 哀求,处理数据等。
二、安装

1. npm install axios

复制代码

三、全局设置

在src目录下，创建一个axios目录管理axios设置文件，在axios目录下创建axiosConfig.ts，内容如下：

1. import axios from "axios";
3. //创建一个axios实例对象
4. const http = axios.create({
6. });
8. //设置请求拦截器(回调函数)
9. http.interceptors.request.use((req)=>{
10.     return req;
11. })
13. //设置响应拦截器
14. http.interceptors.response.use((res)=>{
15.     return res;
16. })
18. //把http实例对象暴露出去
19. export default http;

复制代码

四、挂载到项目上

将http对象挂载到app上

1. import axios from './axios/axiosConfig';
2. //将axios挂载到app这个实例上
3. app.config.globalProperties.$http=axios;

复制代码

五、发送一个axios哀求验证一下

在src文件夹下，创建一个test文件夹用于测试，添加test.vue文件，内容如下：

1. <template>
2.     <div>
3.     </div>
4. </template>
5. <script lang="ts">
6. import {defineComponent, getCurrentInstance} from 'vue';
7. export default defineComponent({
8.     name:'myTest',
9.     setup(){
10.         const {proxy}: any = getCurrentInstance();
11.         //发送axios请求
12.         function ajaxTest(){
13.             proxy.$http.get('https://images.pexels.com/photos/2014422/pexels-photo-2014422.jpeg')
14.             .then((res: any)=>{
15.                 console.log(res);
16.             })
17.             .catch((error: any)=>{
18.                 console.log(error);
19.             });
20.         }
21.         //发送请求，直接调用
22.         ajaxTest();
23.     }
24. })
25. </script>
26. <style scoped>
27. </style>

复制代码

再将上面的代码引入项目中，在HomeView.vue文件中，引入、注册、使用。这是修改后的HomeView.vue:

1. <template>
2.   <div class="home">
3.     <!-- <img alt="Vue logo" src="../assets/logo.png">
4.     <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>-->
5.   </div>
6.   <my-test></my-test>
7. </template>
9. <script lang="ts">
10. import { defineComponent } from 'vue';
11. import myTest from '../test/test.vue'
13. export default defineComponent({
14.   name: 'HomeView',
15.   components: {
16.     myTest,
17.   },
18.   props: {
19.     msg: String,
20.   }
21. });
22. </script>

复制代码

六、运行结果

还可以刷新试试：

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/03f467d6a7374dbb9735fe78e8019c6d.png

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。