vue3项目搭建-6-axios 基础配置

axios 基础配置

安装 axios

复制代码
npm install axios

创建 axios 实例,配置基地址,配置拦截器,目录:utils/http.js

基地址:在每次访问时,自动作为相对路径的根

javascript 复制代码
// axios 基础封装
import axios from "axios";

const httpInstance = axios.create({
    // 项目基地址
    // baseURL:'https://localhost:8888/api',
    baseURL:'http://pcapi-xiaotuxian-front-devtest.itheima.net',
    timeout: 5000
})
// 创建完记得暴露该实例
export default httpInstance

// 添加请求拦截器
httpInstance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
httpInstance.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });

测试路径连接,目录:aips/testAPI.js

javascript 复制代码
import httpInstance from '@/utils/http'

// 给实例传入具体路径,即在最末尾拼接 url
export function getCategory(){
    return httpInstance({
        url: 'home/category/head'
    })
}

在 main.js 中调用:

javascript 复制代码
//测试接口函数
import {getCategory} from '@/apis/testAPI'
getCategory().then(res => {
    console.log(res)
})
相关推荐
速易达网络32 分钟前
Bootstrap 5 响应式网站首页模板
前端·bootstrap·html
etsuyou34 分钟前
js前端this指向规则
开发语言·前端·javascript
lichong95134 分钟前
Android studio 修改包名
android·java·前端·ide·android studio·大前端·大前端++
cai_huaer35 分钟前
BugKu Web渗透之 cookiesWEB
前端·web安全
lichong95137 分钟前
Git 检出到HEAD 再修改提交commit 会消失解决方案
java·前端·git·python·github·大前端·大前端++
友友马1 小时前
『 QT 』QT控件属性全解析 (一)
开发语言·前端·qt
不想上班只想要钱2 小时前
vue3+vite创建的项目,运行后没有 Network地址
前端·javascript·vue.js
流***陌2 小时前
手办盲盒抽赏小程序前端功能设计:兼顾收藏需求与抽赏乐趣
前端·小程序
岁月宁静2 小时前
在富文本编辑器中封装实用的 AI 写作助手功能
前端·vue.js·人工智能
金士顿2 小时前
为什么MainWindow.xaml绑定的datacontext,EtherCATSuiteCtrl.xaml直接用了?
前端