axios在vue3项目中的使用

程序员小张 • 2025-01-27 14:17:14 • 阅读:471

用vue3开发一个新项目，在项目也应用了axios这个库。前后端分离的时候会遇到一个跨域的问题。

这里我是直接在后端配置。项目是用TP，这里也给展示一下后端源码。

<?php
declare (strict_types = 1);

namespace app\picture\controller;

class Test 
{
    function __construct(){
        header("Access-Control-Allow-Origin: *");
    }
    public function index(){

        echo json_encode(["status"=>1,"msg"=>"ok"]);

    }

}

在vue3项目中安装axios。

npm install axios

在项目中应用 axios 需要配置一下。创建一个util文件夹然后再创建http.ts文件。看一下目录：

在这个文件中配置全局的url地址跟超时时间，然后再设置一下拦截器。给大家分享一下我项目的中源码；


import axios from "axios";
const http = axios.create({
    // API基础URL
    baseURL: 'http://test.你的域名.top/index.php', 
    // 请求超时时间
    timeout: 5000, 
    // 其他axios配置...
})
// 添加请求拦截器
http.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});
// 添加响应拦截器
http.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response.data;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
})
export default http;

在页面中引用：

这是一个简单post请求，同时传递了参数，请求成功执行第一个then里面的，请求失败执行catch里面的，最后一个then里面的不管请求成功还是失败都会执行。结果查看下面的截图：

<script setup>
  import http from './util/http';
  http.post("/picture/test/index",{"id":"12"}).then(res=>{
    //成功返回数据
    console.log(res)
  }).catch(err=>{
    //发生错误时执行
    console.log(err)
  }).then(()=>{
    console.log("无论咋样都会执行 ")
  })
</script>

请求成功：