封装nuxt 请求-- $fetch

最新推荐文章于 2025-04-09 18:35:45 发布

想喝橙汁儿

最新推荐文章于 2025-04-09 18:35:45 发布

阅读量1.3k

点赞数 8

文章标签： nuxt3

本文链接：https://blog.youkuaiyun.com/weixin_46328144/article/details/136563286

版权

文章介绍了如何使用request.js库在JavaScript中创建一个可拦截请求和响应的HTTP客户端，包括请求参数处理、头部配置以及针对不同HTTP方法的封装。具体展示了如何在API中实现用户注册和登录功能的调用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

reuqest.js


const $http = $fetch.create({
  // 请求拦截
  onRequest(req) {
    const token = localStorage.getItem('token')
    const method = req.options.method;
    if (method == 'GET') {
      req.options.params = req.options.params;
    } else {
      req.options.body = req.options.params;
    }
    // 请求拦截相关配置
    req.options.headers = {
      'Content-Type': 'application/json',
      'Authorization': '',
      'platform': 'PC',
      'client': 0
    }
    if (token) {
      req.options.headers.Authorization = 'Bearer ' + token;
    }
    // console.log(req, "请求拦截")
  },
  // 请求错误拦截
  onRequestError(error) {
    // 请求错误拦截相关配置
    // console.log(error, "请求错误拦截")
    return Promise.reject(error);
  },
  // 响应拦截
  onResponse(res) {
    // 响应拦截相关配置
    // console.log(res,"响应拦截")
  },
  // 响应错误拦截
  onResponseError(error) {
    // 响应错误拦截相关配置
    // console.log(error.response, "响应错误拦截")
    return Promise.reject(error);
  },
})
class Requester {
  static get(url, params) {
    return $http(url, { method: 'get', params })
  }
  static post(url, params) {
    return $http(url, { method: 'post', params })
  }
  static put(url, params) {
    return $http(url, { method: 'put', params })
  }
  static delete(url, params) {
    return $http(url, { method: 'delete', params })
  }

}

export default Requester;

api.js

import Requester from './request.js'
const bptDomain = ''
`class Api {
// 用户注册/登录(手机&code)
  static loginPn(data = {}) {
    return Requester.post(`${bptDomain}/doctor-cheese/auth/v1/login/pn`, data)
  }
  // 获取用户身份列表
  static getUserHalo(data = {}) {
    return Requester.get(`${bptDomain}/doctor-cheese/user/halo/v1/my`, data)
  }
}
export default Api

composables 文件夹下 userApi.js

import api from '@/api/api.js'

export default api