axios请求封装

axios.js

import axios from "axios";
const instace = axios.create({
  baseURL: "https://internal.takehr.cn", //接口地址
  timeout: 5000, //超时时间
});
//配置请求拦截器,在请求之前的数据处理,比如在请求头添加token,所有的请求都会经过拦截器
instace.interceptors.request.use(
  //config:该参数表示当前请求的配置对象
  (config) => {
    return config;
  },
  (err) => {
    return Promise.reject(err); //将错误消息挂到promise的失败函数上
  }
);

//配置响应拦截器
// 响应拦截器:在请求响应之后对数据处理，比如:登录失败、请求数据失败的处理
instace.interceptors.response.use(
  (response) => {
    console.log("response", {
      response: response.data, // 响应的结果数据
      parameter: {
        url: response.config.url,  // 请求的接口地址
        // headers:{
          // token:response.config.headers.token  // headers头的参数信息
          // ... 下面可以添加其他headers头里面的参数
        // },
        data: JSON.parse(response.config.data),  // 请求携带的请求参数信息
      },
    }); // 参数一是响应的数据，参数二是携带的参数和请求的url路径信息
    return response.data; //这里的response就是请求成功后的res , response.data即是请求成功后回调函数内的参数res.data
  },
  (err) => {
    console.log("err", {
      err: err.response.data,  // 请求的错误信息
      parameter: {
        url: err.response.config.url, // 请求的接口地址
        // headers:{
          // token:err.response.config.headers.token // headers头的参数信息
          // ... 下面可以添加其他headers头里面的参数
        // },
        data: JSON.parse(err.response.config.data),  // 请求携带的请求参数信息
      },
    }); // 参数一是响应的数据，参数二是携带的参数和请求的url路径信息
    return Promise.reject(err); //将错误消息挂到promise的失败函数上
  }
);

//封装请求的api
const callapi = (method = "GET", url, data = {}, customHeaders = {}) => {
  if (method === "GET") {
    return instace({
      method,
      url,
      params: data,
      ...customHeaders,
    });
  } else {
    return instace({
      method,
      url,
      params: {},
      data: data,
      ...customHeaders,
    });
  }
};
//封装GET,POST请求函数
export const getapi = (url, data, customHeaders) =>
  callapi("GET", url, data, customHeaders);
export const postapi = (url, data, customHeaders) =>
  callapi("POST", url, data, customHeaders);

index.js

import {getapi, postapi} from './axios';
export const login = data => postapi('/api/v1.login/signin', data); // 用户登录
export const register = data => postapi('/api/v1.login/signup', data); // 用户注册
export const SendVerificationCode = data => postapi('/api/v1.login/vertiy', data); // 使用邮箱验证码登录
export const validateResetPasswordEmail = data =>  postapi('/api/v1.login/findaccount', data); // 忘记密码邮箱校验
export const forgetPassword = data => postapi('/api/v1.login/resetPwd', data); // 忘记密码
export const photo = (data, customHeaders) => postapi('/api/upload/image', data, customHeaders);

使用

import { postapi } from './index.js'

// 参数一:请求参数
// 参数二:配置请求header头
postapi({name:Jack},{headers:{config:'...'}}).then((res)=>{
	console.log(res)
})