浅谈axios的二次封装与拦截器

axios的二次封装与拦截器

• 官网：https://www.npmjs.com/package/axios#interceptors
• 就是在请求发出去之前的操作！
  • 比如：请求的时候需要携带token值，需要一个loading等效果！

network/request.js 请求拦截等

import axios from "axios";
import store from "../store/index"
import {
  message
} from "antd"
const request = axios.create({
  baseURL: 'http://120.76.247.5:2001/api',
  withCredentials: true,
})

//请求拦截 
request.interceptors.request.use(function (config) {
  //在这块处理一些 请求拦截时的公共 部分  比如 一个发起请求的时候 需要携带token
  const state = store.getState()
  config。baseUrl = 'XXX 就是你请求的base基础路径，这样的话，就不用服务器代理了';
  config.headers.authorization = state.user.Authorization
  // 这个把用户信息 存储在store之中，其实也可以从本地存储之中拿！
  message.loading({
    content: '努力加载中....',
    duration: .5
  });
  return config;
}, function (error) {
  return Promise.reject(error);
});

//响应拦截
request.interceptors.response.use(function (response) {
  // console.log("2222");
  return response
}, function (error) {
  return Promise.reject(error)
})

//对axios的二次封装 

// axios中的get请求 -> axios.request(config) config里面所有的配置参数
// axios#get(url[, config]) 其中 [] -> 代表的是 里面的参数可以省略
export async function get(url, data, config = {}) { //参数1：url 参数2：get请求的参数 参数3：配置的参数
  const {
    data: result
  } = await request({
    ...config,
    method: "get",
    url,
    params: data
  })
  return result
}

//post请求
export async function post(url, data, config = {}) {
  const {
    data: result
  } = await request({
    ...config,
    url,
    method: 'post', //post方式
    data
  })
  return result
}

//put请求
export async function put(url, data, config = {}) {
  const {
    data: result
  } = await request.put(url, data, config);
  return result;
}

//remove请求
export async function remove(url, data, config = {}) {
  const {
    data: result
  } = await request.delete(url, {
    ...config,
    params: data
  });

  return result;
}

export default {
  get,
  post,
  put,
  remove
}

具体使用

• 需要设置一个 返回的退路 fallback

        <Suspense fallback={<div>loading...</div>} >
          <Switch>
            <Route path="/login" component={Login}></Route>
            <Route path="/reg" component={Reg}></Route>
            <Route path="/home" component={Home}></Route>
            <Route path="/about" component={About}></Route>
            <Route path="/cart" component={Cart}></Route>
            <Route path="/iq/:id" component={IQ} />
            <Route path="/mine" component={Mine}></Route>
            <Redirect path="/" to="/home" exact ></Redirect>
          </Switch>
        </Suspense>