【VUE】axios组件

1. 快速使用

• npm install axios
  
• LoginView.vue
  1. import axios from "axios"
  2. axios.get("...")
  3. axios.post("...")
  4. axios.axios({
  5.         method: "get"
  6. })

  复制代码

2. 通用设置

• npm install axios
  
• plugins/axios.js
  1. import axios from "axios";
  3. let config = {
  4.     baseURL: "xxx",
  5.     timeout: 20 * 1000   // ms
  6. }
  8. const _axios = axios.create(config)
  9. // 拦截器
  10. _axios.interceptors.request.use(function (config){
  11.         xxx;
  12.     return config
  13. })
  15. export default _axios

  复制代码
• LoginView.vue
  1. <script setup>
  2. import _axios from "@/plugins/axios.js";
  3. _axios.get("/api/v1/course/category/free/?courseType=free").then((res) => {
  4.   console.log(res.data)
  5. })
  6. </script>

  复制代码

3. 示例

plugins/axios.js

1. import axios from "axios";
3. let config = {
4.     baseURL: "https://api.luffycity.com/",
5.     timeout: 20 * 1000
6. }
8. const _axios = axios.create(config)
10. // 拦截器
11. _axios.interceptors.request.use(function (config){
12.     // console.log("请求前：", config)
13.     // 1. 去pinia中读取当前用户token
14.     // 2. 发送请求时携带token
15.     if(config.params){
16.         config.params["token"] = "djbfkjbdfkj"
17.     } else {
18.         config.params = {"token": "whejsabjdnfj"}
19.     }
20.     return config
21. })
23. export default _axios

复制代码

LoginView.vue

1. <template>
2.   <div class="box">
3.     <p>
4.       用户名：
5.       <input type="text" placeholder="用户名" v-model="msg.username">
6.     </p>
7.     <p>
8.       密码：
9.       <input type="text" placeholder="密码" v-model="msg.password">
10.     </p>
11.     <p>
12.       <button @click="doLogin">登录</button>
13.     </p>
14.   </div>
15. </template>
17. <script setup>
18. import {ref} from "vue";
19. import {useRouter} from "vue-router";
20. import {userInfoStore} from "@/stores/user.js";
21. import _axios from "@/plugins/axios.js";
23. const msg = ref({
24.   username: "",
25.   password: ""
26. })
27. const router = useRouter()
28. const store = userInfoStore()
30. const doLogin = function () {
31.   // 1、获取数据
32.   console.log(msg.value)
33.   // 2、发送网络请求
34.   _axios.get("/api/v1/course/category/free/?courseType=free").then((res) => {
35.     console.log(res.data)
36.   })
37.   // 3、本地存储用户信息（登录凭证）
38.   // localStorage.setItem("name", msg.value.username)
39.   let info = {id: 1, name: msg.value.username, token: "ddsafhsjdfkj"}
40.   store.doLogin(info)
41.   // 3、跳转到首页
42.   router.push({name: "mine"})
43. }
45. </script>
47. <style scoped>
48. .box {
49.   width: 300px;
50.   margin: 100px auto;
51. }
52. </style>

复制代码

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