cc's web
0%

简单封装axios

发表于 更新于 分类于

对axios进行简单的封装，这里使用的框架是react

安装react脚手架

1
npm install -g create-react-app

使用react脚手架创建项目

1
create-react-app react-demo

安装需要的包

1
2
npm i axios  //http库
npm install http-proxy-middleware -D  //proxy代理 接口跨域问题

接下来

配置代理

新建配置文件/src/setupProxy.js

1
2
3
4
5
6
7
8
9
10
11
12
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
    app.use(createProxyMiddleware('/api', {
        target : 'http://127.0.0.1:3000',
        changeOrigin : true,
        ws: true,
        pathRewrite : {
            '^/api' : ''
        },
    }));
};

封装axios

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import axios from 'axios'

const baseURL = process.env.NODE_ENV=="development" ? 'http://127.0.0.1:4000' : '在线地址'

const ajax = axios.create({
    baseURL,
    timeout: 1000 * 60
})

//请求拦截器
ajax.interceptors.request.use(config => {
    //设置token
    config.headers.token = window.localStorage.getItem('token') || window.sessionStorage.getItem('token');
    return config
  }, error => {
      return error;
})

// 响应拦截器
ajax.interceptors.response.use(response => {
    //根据response.code 做对应的处理  比如登录验证等等。
    return response.data
})

export default ajax

测试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import logo from './logo.svg';
import './App.css';
import ajax from './libs/ajax'


function App() {
  ajax.get('/api/hero/get').then(function (res) {
    console.log(res,'res');
  })
  
  return (
    <div className="App">
        hello axios
    </div>
  );
}

export default App;

最后

这是一个简单的demo，可以单独抽离出api配置文件并对post和get方法进一步封装。