api axios 封装

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'

        login(values.email, values.password).then(res => {

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

        }).catch(err => {

        })