axios的简单封装和http请求实践

对axios做一个简单的封装和实现的思路，主要实现：

统一捕获接口报错（拦截器）基础验证 （auth）

import axios from 'axios'// 最基本的全局配置const instance = axios.create({baseURL: "/j/",timeout: 2500})复制代码

// Add a request interceptor， 发送请求之前instance.interceptors.request.use( (config) => {//add authreturn config;}, (error) => {return Promise.reject(error);});复制代码

// Add a response interceptorinstance.interceptors.response.use( (response) => {// 返回错误判断(服务器端定义的err code)//保存auth tokenreturn response;}, (error) => {// 可以在后面的请求中catchreturn Promise.reject(error);});复制代码

下面是最基本的请求：

//可以参考定义post， put， deleteconst requests = {get: url =>instance.get(url).then(res => {console.log(res)return res.data})}复制代码

上面是基本的网络配置。

接下来就可以针对不用的模块，去发送不同的请求：

const Movies = {all: () => requests.get('/new_search_subjects?tags=%E4%B8%AD%E5%9B%BD&start=0')}export default {Movies,}复制代码

如上，可以将电影模块所有相关的网络请求都放在同一个对象里面。

const click_button = () => {agent.Movies.all().then().catch().finally()}复制代码

在组件中就可以调用如下函数，进行数据处理，异常处理。finally可用作loading的取消等等。

注意：如果response有错误在interceptors被catch，那么后续的then将不会被调用。这个点可以用作对用户的错误请求提示，而不必在每个请求后手动添加catch。

关于finally的使用：npm install axios promise.prototype.finally --save先安装依赖。 之后如下调用，即可使用finally。

import promiseFinally from 'promise.prototype.finally'promiseFinally.shim();ReactDOM.render(<App />, document.getElementById('root'));registerServiceWorker();复制代码

各业务不同，因此只是简写大概，欢迎交流。

参考资料： 给axios做个挺靠谱的封装(报错,鉴权,跳转,拦截,提示)

mobx组织实践和http封装组织 axios 配置finally

github：/yunshuipiao