axios请求封装,适用于RN,React,Vue,Uniapp(相对于前面几个新增个自定义header头)

axios.js

js 复制代码
import axios from 'axios';
const instace = axios.create({
  baseURL: 'https://internal.takehr.cn', //接口地址
  timeout: 5000, //超时时间
});

//配置请求拦截器,在请求之前的数据处理,比如在请求头添加token,所有的请求都会经过拦截器
instace.interceptors.request.use(
  //config:该参数表示当前请求的配置对象
  config => {
    console.log('config', config);
    return config;
  },
  err => {
    return Promise.reject(err); //将错误消息挂到promise的失败函数上
  },
);

//配置响应拦截器
// 响应拦截器:在请求响应之后对数据处理,比如:登录失败、请求数据失败的处理
instace.interceptors.response.use(
  response => {
    return response; //这里的response就是请求成功后的res , response.data即是请求成功后回调函数内的参数res.data
  },
  err => {
    return Promise.reject(err); //将错误消息挂到promise的失败函数上
  },
);

//封装请求的api
const callapi = (method = 'GET', url, data = {}, customHeaders = {}) => {
  return instace({
    method,
    url,
    params: method === 'GET' ? data : {},
    data: method === 'POST' ? 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

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);

使用

js 复制代码
import { postapi } from './index.js'

// 参数一:请求参数
// 参数二:配置请求header头
postapi({name:Jack},{headers:{config:'...'}}).then((res)=>{
	console.log(res)
})
相关推荐
速易达网络8 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘9 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
lyj16899710 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽11 小时前
一、react18+项目初始化(vite)
前端·react.js
我在北京coding13 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
海天胜景14 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘14 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
乆夨(jiuze)15 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
小彭努力中15 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
xiguolangzi16 小时前
vue3+element-plus el-table列的显隐、列宽 持久化
前端·javascript·vue.js