api axios 封装

傷城~ 2023-06-28 04:56 8阅读 0赞

react/vue

前提  安卓 axios

yarn add axios

**react 设置代理   **

先安装下，install http-proxy-middleware

新建 setupProxy.js

setupProxy.js-------------------------------------------------

const proxy = require('http-proxy-middleware');

module.exports = function(app) \{

app.use(proxy('/yyapi', \{

target: 'http://192.168.1.214:8085',

// target: 'http://192.168.1.64:8080',

// target: 'http://47.244.179.151:8080',

changeOrigin: true,

pathRewrite: \{'^/yyapi': ''\}

\}));

新建三个js（http.js, iaxios.js, index.js）

http.js  ---------------------------------------------------------------------------------------

import iaxios from './iaxios'

import \{ message \} from 'antd'

const handleError = function (code, msg) \{

message.destroy();

switch (code) \{

case 200:

message.success(msg)

break;

case 400:

message.warn(msg)

break

case 401:

case 403:

message.error(msg)

window.location.href = '/home'

break;

case 500:

message.error(msg)

break;

default:

message.error('请求出错了')

const http = function (url, method, param, config, showMessage) \{

method = method ? method.toLowerCase() : 'get'

return new Promise((resolve, reject) => \{

iaxios\[method\](url, param, config).then(res => \{

const data = res.data

const code = res.data.code

showMessage && handleError(data.code, data.message)

if (code) \{

if (code === 200) \{

resolve(res.data)

\} else \{

reject()

\} else \{

resolve(res.data)

\}).catch(err => \{

const res = err.response

handleError(res.status, res.statusText)

reject(err)

\})

export default http

iaxios.js----------------------------------------------------------------------------

import axios from 'axios'

axios.defaults.headers = \{

'api-version': 'V1',

axios.defaults.baseURL = '/yyapi/f'

axios.interceptors.request.use(function (config) \{

return config;

\}, function (error) \{

return Promise.reject(error);

\});

axios.interceptors.response.use(function (response) \{

return response;

\}, function (error) \{

return Promise.reject(error);

\});

//设置令牌

export const setHeaders = function (headers) \{

for (let key in headers) \{

axios.defaults.headers\[key\] = headers\[key\]

export default axios

index.js----------------------------------------------------------------------------

import http from './http'

import axios from './iaxios'

//用户注册

export const regist = function (params) \{

const url = '/data/user/unAuth/register'

return http(url, 'POST', params, null, true)

//用户登录

export const login = function (email, password) \{

const url = '/login?email=' + email +'&password=' + password

return http(url, 'POST', null, null, true)

页面中使用

import \{ login \} from '../api'

import \{ setHeaders \} from '../api/iaxios'

setHeaders(\{ Authorization: res.data.Authorization \})

\}).catch(err => \{

\})

api axios 封装

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 api axios 封装

相关封装axios

相关 axios封装

相关封装axios

相关 axios post body参数_Vue 的axios 封装和 API 接口管理

相关 axios封装与api接口管理

相关 Vue中Axios封装API接口的方法

相关 vue api层封装 axios封装（大厂案例）

相关 axios封装

相关 axios封装