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)
})
相关推荐
上单带刀不带妹13 分钟前
JavaScript 中的宏任务与微任务
开发语言·前端·javascript·ecmascript·宏任务·微任务
网安Ruler14 分钟前
Web开发-PHP应用&TP框架&MVC模型&路由访问&模版渲染&安全写法&版本漏洞
前端·php·mvc
AI视觉网奇41 分钟前
音频获取长度
java·前端·python
小喷友1 小时前
第 6 章:API 路由(后端能力)
前端·react.js·next.js
zwjapple1 小时前
Next.js 中使用 MongoDB 完整指南
开发语言·javascript·mongodb
像素之间1 小时前
elementui中rules的validator 用法
前端·javascript·elementui
小高0071 小时前
🚀把 async/await 拆成 4 块乐高!面试官当场鼓掌👏
前端·javascript·面试
CF14年老兵1 小时前
SQL 是什么?初学者完全指南
前端·后端·sql
2401_837088502 小时前
AJAX快速入门 - 四个核心步骤
前端·javascript·ajax
一月是个猫2 小时前
前端工程化之Lint工具链
前端