用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>
请求成功：
请求失败：
------------------ 华丽分割线 ------------------
欢迎大家阅读我的创业笔记，如果你觉得这篇写得不错的话，可以关注我的公众号： 成长创业笔记 ；每周不见不散。
我是一名独立开发者。欢迎大家跟我交流软件开发、软件运营的一切事情，包括网站建设，小程序开发，app开发。
微信号：zstxinghui
更欢迎大家使用我的APP
1、松鼠天气，简洁的天气预报，节日日历工具。
2、陪诊小程序，家政小程序等行业小程序。
我的网站 ： axios在vue3项目中的使用
