axios网络封装模块 (2)

并在需要使用的地方请求

import {request} from "./network/request"; /******************************/ // 方法1对应请求方法 // /*****************************/ request({ url: '/home/multidata' }), res => { console.log(res); }, err => { console.log(err); } /******************************/ // 方法2对应请求方法 // /*****************************/ request({ caseConfig:{ }, success: function(res){ }, failure: function(err){ } }) /******************************/ // 方法3 promise对应请求方法 // /*****************************/ request({ url:'地址' }).then(res => { console.log(res); }).catch(err => { console.log(err); }) 拦截网络请求 请求拦截 import axios from 'axios' export function request(config){ // 1. 创建axios的实例 const instance = axios.creat({ baseURl: '服务器地址', timeout: 100 }) // 2. axios的拦截器 instance.interceptors.request.use(config => { console.log(config); // - 比如config中的一些信息不符合服务器的要求 // - 比如每次发送网络请求时,在界面中显示请求图标 // - 某些网络请求(比如登录token)必须携带一些东西 return config }), err => { console.log(err); } // 3. 发送真正的网络请求 return instance(config) } 响应拦截 import axios from 'axios' export function request(config){ // 1. 创建axios的实例 const instance = axios.creat({ baseURl: '服务器地址', timeout: 100 }) // 2. axios的拦截器 instance.interceptors.response.use(res => { console.log(res); return res.data // 返回有用的信息 }), err => { console.log(err); } // 3. 发送真正的网络请求 return instance(config) }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wspdyx.html