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

目录

• • axios的二次封装与拦截器
  • • network/request.js 请求拦截等
    • 具体使用

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) {//在这块处理一些 请求拦截时的公共 部分  比如 一个发起请求的时候 需要携带tokenconst 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>