yarn add axios?

import http from './http.js'
// 獲取驗證碼，這個函數(shù)指的是使用GET請求請求目標(biāo)服務(wù)器的
Captcha路由
export function getCaptcha() {
    return http.get("/captcha")
}  
// 驗證用戶名\密碼，這里指的是使用POST方法請求Login接口，并攜帶params對象作為參數(shù)。
export function verifyUserNameAPI(params) {
    return http.post("/login", params)
}

import request from '@/api/request'
const http = {
        get(url, params) {
            const config = {
                method: 'get',
                url: url
            } /*這里如果GET請求有參數(shù)，則攜帶上傳入的參數(shù)，在
            URL中以？的方式放在請求鏈接中*/
            if (params) config.params = params
            return request(config)
        },
        post(url, params) {
            const config = {
                method: 'post',
                url: url
            }/*同理也是傳入用戶需要發(fā)送到后臺的參數(shù)，這些參數(shù)
            放在報文中，載體表達(dá)標(biāo)準(zhǔn)是JSON*/
            if (params) config.data = params
            return request(config)
        },
    }
    
//暴露接口，允許Vue文件或其他js,ts文件使用http結(jié)構(gòu)體中的方法
export default http

import axios from 'axios';
// 創(chuàng)建一個自定義的Axios對象
const Axios = axios.create({
    baseURL: 'http://127.0.0.1:1234',
    timeout: 3000,
    /*也可以不設(shè)置Content-Type，影響是在你發(fā)送請求時
    Vue會先發(fā)送OPTIONS包探測路由是否存在，需要后端也做設(shè)置響應(yīng)OPTIONS
    方法，否則會報跨域錯誤；我這里用的Beego2，路由里不響應(yīng)OPTIONS方法，
    所以我在這塊設(shè)置Content-Type*/
    headers: { 
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    /*這個配置很重要，允許axios攜帶用戶Cookie到后端，不設(shè)置這個的話
    Set-Cookie是無效的,除此之外,Chrome默認(rèn)開啟了SameSite檢查，如果
    后端不主動設(shè)置SameSite = none,Set-Cookie是無效的。詳情請文章末尾
    參考阮老師的SameSite講解*/
    withCredentials: true
});
Axios.interceptors.request.use(req => {
    // 請求攔截處理
    // console.log('這里是請求攔截器，我攔截了請求', req);
    return req; 
}, err => {
    console.log('在發(fā)送請求時發(fā)生錯誤，錯誤為', err);
    //這里不能直接放回err,需要按照官方說明返回一個Promise
    return Promise.reject(err);
})
Axios.interceptors.response.use(res => {
        // 響應(yīng)攔截處理
        // console.log('響應(yīng)攔截 ', res);
        return res.data;
    }, error => {
        const err = error.toString();
		//按照實(shí)際的響應(yīng)包進(jìn)行解析，通過關(guān)鍵字匹配的方式
        switch (true) {
            case err.indexOf('Network') !== -1:
                console.log('后端服務(wù)器無響應(yīng)或者URL錯誤', err);
                break;
            case err.indexOf('timeout') !== -1:
                console.log('請求后端服務(wù)器超時！', err);
                break;
        }
        return Promise.reject(error);
    })
//暴露Axios實(shí)例化對象，允許所有文件調(diào)用Axios
export default Axios;

//導(dǎo)入聲明的API請求函數(shù)
import { getCaptcha } from "@/api/api";
import { useMessage } from "naive-ui";
export default {
  setup() {
    let captchaId = ref();
    onMounted(() => {
       //onMounted是Vue聲明周期的鉤子函數(shù)，由Vue提供，
       //請參考Vue聲明周期鉤子官方文檔
      getcaptchaAPI();
    });
    function getcaptchaAPI() {
      getCaptcha()
        .then((res) => {
          /*這里的res是響應(yīng)成功是返回的數(shù)據(jù)，res.data說明獲取報文
          中的data字段對應(yīng)的值,我在setup聲明使用的ref，所以賦值時
          需要使用captchaId.value的方式*/
          captchaId.value = res.data;
        })
        //在這里處理錯誤
        .catch((err) => console.log(err));
    }
   }
}

<script>
// getInTheaters 為封裝的接口請求
import { getInTheaters } from "@/api/movie";
import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  onBeforeUnmount,
  provide,
} from "vue";
import { useRouter } from "vue-router";
import { useStore } from 'vuex'
export default {
  components: {},
  setup() {
    const state = reactive({
      inTheaters: [],
    });
 
    // 編程式導(dǎo)航
    const router = useRouter();
    const store = useStore();
 
    onBeforeMount(() => {
      store.commit("setShowBack", false);
    });
 
    onBeforeUnmount(() => {
      store.commit("setShowBack", true);
    });
 
    const getInTheatersData = async () => {
      const res = await getInTheaters(
        "/gateway?cityId=310100&pageNum=1&pageSize=10&type=1&k=3535827"
      );
      state.inTheaters = res.data.data.films;
 
      onMounted(() => {
        //執(zhí)行請求
        getInTheatersData();
      });
 
       //頁面跳轉(zhuǎn)
      const goToList = (type) => {
        router.push(`/list/${type}`);
      };
 
      // 傳遞數(shù)據(jù)給子組件
      provide("title", "電影");
 
      return { ...toRefs(state), goToList };
    };
  },
};
</script>