Nuxt3服务端渲染(SSR)请求封装-方法三

本次使用Axios进行封装做Nuxt3服务端渲染。

封装axios请求工具

utils/request.ts

import axios from "axios";

// 创建 axios 实例
const instance = axios.create({
  // baseURL: "https://example.com/api", // 设置基础 URL
  timeout: 5000, // 设置请求超时时间
});

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

// 添加响应拦截器
instance.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    if (response.status === 200) {
      return Promise.resolve(response.data);
    } else {
      return Promise.resolve(response);
    }
  },
  function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

// 封装 post 方法
export function post(url, data) {
  return instance.post(url, data);
}

// 封装 put 方法
export function put(url, data) {
  return instance.put(url, data);
}

// 封装 get 方法
export function get(url, params) {
  return instance.get(url, { params });
}

// 封装 delete 方法
export function del(url) {
  return instance.delete(url);
}

服务器端请求

server/api/axiosApi.ts

import { get } from "~~/utils/request";

export const apiGet = (url: string, params: object) => {
  return get(url, params);
};


// 同上可以自行加post等其他请求。

请求使用

在pages/index.vue做一个简单的get请求。

import { apiGet } from '~~/server/api/axiosApi'

interface user {
  id: number;
  name?: string;
  email?: number;
  body?: string;
}

let users: Ref<user[]> = reactive([]);


const res = await apiGet('https://jsonplaceholder.typicode.com/comments')
users.value = res;

文章版权归 有个狸 所有，未经许可不得转载，责任编辑：有个狸。