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