前端的数据请求封装有没有什么通用的模版，每次都会忘记，那个能讲讲原理

数据请求封装有没有什么通用的模版，每次都会忘记，那个能讲讲原理、
数据请求封装有没有什么通用的模版，每次都会忘记，那个能讲讲原理
数据请求封装有没有什么通用的模版，每次都会忘记，那个能讲讲原理；
救救孩子吧

拿去不谢

```javascript

/**
 * http配置
 * axios参数说明
 */
import axios from 'axios'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

axios.defaults.timeout = 20000;
axios.defaults.headers.post['Content-Type'] = 'application/json; charset=utf-8'
//返回其他状态吗
axios.defaults.validateStatus = function (status) {
  return status >= 200 && status <= 500; // 默认的
};
//跨域请求，允许保存cookie
axios.defaults.withCredentials = true;
NProgress.configure({
  showSpinner: false
});
//HTTPrequest拦截
axios.interceptors.request.use(config => {
  NProgress.start();
  const meta = (config.meta || {});
  const isToken = meta.isToken === false;
  //headers中配置serialize为true开启序列化
  return config
}, error => {
  return Promise.reject(error)
});
//HTTPresponse拦截
axios.interceptors.response.use(res => {
  NProgress.done();
  const status = res.data.code || 200;
  const message = res.data.msg || '未知错误';
  if (status !== 200) {
    return Promise.reject(new Error(message))
  }
  return res;
}, error => {
  NProgress.done();
  return Promise.reject(new Error(error));
});

export default axios;

```

通常使用axios进行http请求
首先创建一个http.js 作为配置文件
封装axios首先要确认请求域名地址、设置请求超时、请求头
是否需要请求拦截，根据token或其他需求进行拦截处理
状态码返回错误信息封装 如最常见的403 404 500
附加的还有就是请求失败后重复请求三次等等处理
然后创建api.js文件进行接口封装处理
百度下axios请求封装很多模板的可以去参考下