React — 请求模块(http)封装、API模块封装

一、请求模块封装

//axios封装
//根域名配置
//超时
//请求拦截器/响应拦截器
import axios from 'axios'

const http = axios.create({
    baseURL :  "",
    timeout : 5000
})

// 在发送请求之前拦截 插入自定义配置 对于参数的处理
http.interceptors.request.use(config => {

    return config;
  }, error => {
    // 对请求错误做些什么
    return Promise.reject(error);
});


// 对响应数据做拦截 处理返回数据
http.interceptors.response.use(response => {

    return response;
  }, error => {
    // 对响应错误做些什么
    return Promise.reject(error);
  });




export {http}

优化:所有的功能性文件都在utils文件夹中 中转导出

//统一中转导出

import {http} from './request'

export {
    http
}

 二、API模块

import {http} from '@/utils'

export function LoginAPI(formData){
   return http({
        url : '/login',
        method : 'POST',
        data : formData,
    })
}

export function UserInfoAPI(){
    return http({
         url : '/user/info',
         method : 'GET'
     })
 }


 //////////////////////////////////////////////////////////


 //使用
//  import { LoginAPI, LoginAPI } from "@/Api";
//  LoginAPI()

 

posted on 2024-03-12 17:42  萬事順意  阅读(246)  评论(0编辑  收藏  举报