【VUE】axios组件

1. 快速使用

• npm install axios
• LoginView.vue

  import axios from "axios"
  axios.get("...")
  axios.post("...")
  axios.axios({
  	method: "get"
  })
  

2. 通用配置

• npm install axios
• plugins/axios.js

  import axios from "axios";
  
  let config = {
      baseURL: "xxx",
      timeout: 20 * 1000   // ms
  }
  
  const _axios = axios.create(config)
  // 拦截器
  _axios.interceptors.request.use(function (config){
  	xxx;
      return config
  })
  
  export default _axios
  

• LoginView.vue

  <script setup>
  import _axios from "@/plugins/axios.js";
  _axios.get("/api/v1/course/category/free/?courseType=free").then((res) => {
    console.log(res.data)
  })
  </script>
  

3. 示例

plugins/axios.js

import axios from "axios";

let config = {
    baseURL: "https://api.luffycity.com/",
    timeout: 20 * 1000
}

const _axios = axios.create(config)

// 拦截器
_axios.interceptors.request.use(function (config){
    // console.log("请求前：", config)
    // 1. 去pinia中读取当前用户token
    // 2. 发送请求时携带token
    if(config.params){
        config.params["token"] = "djbfkjbdfkj"
    } else {
        config.params = {"token": "whejsabjdnfj"}
    }
    return config
})

export default _axios

LoginView.vue

<template>
  <div class="box">
    <p>
      用户名：
      <input type="text" placeholder="用户名" v-model="msg.username">
    </p>
    <p>
      密码：
      <input type="text" placeholder="密码" v-model="msg.password">
    </p>
    <p>
      <button @click="doLogin">登录</button>
    </p>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {useRouter} from "vue-router";
import {userInfoStore} from "@/stores/user.js";
import _axios from "@/plugins/axios.js";

const msg = ref({
  username: "",
  password: ""
})
const router = useRouter()
const store = userInfoStore()

const doLogin = function () {
  // 1、获取数据
  console.log(msg.value)
  // 2、发送网络请求
  _axios.get("/api/v1/course/category/free/?courseType=free").then((res) => {
    console.log(res.data)
  })
  // 3、本地存储用户信息（登录凭证）
  // localStorage.setItem("name", msg.value.username)
  let info = {id: 1, name: msg.value.username, token: "ddsafhsjdfkj"}
  store.doLogin(info)
  // 3、跳转到首页
  router.push({name: "mine"})
}

</script>

<style scoped>
.box {
  width: 300px;
  margin: 100px auto;
}
</style>