TypechoJoeTheme

Dcr163的博客

统计

Vue封装全局公共请求

2023-09-04
/
0 评论
/
437 阅读
/
正在检测是否收录...
09/04

Vue封装全局公共请求

创建一个名为http.js的新文件,文件位置自己定,用于配置全局请求包装:

// http.js

import axios from 'axios';

// 创建一个 Axios 实例
const axiosInstance = axios.create({
  baseURL: 'https://api.example.com', // 您的 API 基础 URL
  timeout: 10000, // 请求超时时间
});

// 添加请求拦截器
axiosInstance.interceptors.request.use(
  (config) => {
    // 在请求发送之前可以在这里进行操作,例如添加通用的请求头
    config.headers.common['Authorization'] = 'Bearer YourAccessToken';
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 添加响应拦截器
axiosInstance.interceptors.response.use(
  (response) => {
    // 在响应返回之前可以在这里进行操作,例如处理错误响应
    return response;
  },
  (error) => {
    // 处理请求错误,可以进行全局错误处理
    return Promise.reject(error);
  }
);

export default axiosInstance;

在Vue3应用中,挂载全局HTTP请求

// main.js

import { createApp } from 'vue';
import App from './App.vue';
import http from './http'; // 导入 http.js 文件

const app = createApp(App);

// 将 http 实例挂载到全局配置对象的 globalProperties 中
app.config.globalProperties.$http = http;

app.mount('#app');

在Vue2应用中,挂载全局HTTP请求

// main.js

import Vue from 'vue';
import App from './App.vue';
import http from './http'; // 导入 http.js 文件

Vue.config.productionTip = false;

// 将 http 实例挂载到 Vue 实例的原型上
Vue.prototype.$http = http;

new Vue({
  render: h => h(App),
}).$mount('#app');
朗读
赞(0)
版权属于:

Dcr163的博客

本文链接:

https://dcr163.cn/697.html(转载时请注明本文出处及文章链接)

评论 (0)

人生倒计时

今日已经过去小时
这周已经过去
本月已经过去
今年已经过去个月

最新回复

  1. William Tardent
    2024-02-27
  2. Maryann Hamer
    2024-02-27
  3. Sanora Pantano
    2024-02-24
  4. aa
    2024-02-21
  5. Kassie Baum
    2024-01-28

标签云