Axios二次封装

axios是一个基于Promise的http库，可以用在浏览器和node.js中。同时也是对原生浏览器请求XMLHttpRequest的封装，支持Promise的APi请求，避免了回掉地狱问题，可以对请求进行拦截，在发出请求前对请求参数进行修改，接受服务器响应时，也可以根据返回的code进行统一的处理，且客户端支持防御XSRF。可以开箱即用，但是在实际项目时，需要对axios进行二次封装

实例 Or defaults

对 axios 进行二次封装由两种方式，一种是创建一个axios实例，另外一种是直接修改axios的defaults

import axios from 'axios';
var instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

import axios from 'axios';
axios.defaults.baseURL = SERVICE;

当然在使用第一种创建一个实例时，也可以设置这个实例的defaults，就像这样

import axios from 'axios';
var instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});
instance.defaults.baseURL = SERVICE;

设置baseURL

在前后端分离项目，往往需要定义一个全局变量来声明后台的接口地址，一般我会选择通过 webpack 的 definePlugin 插件来给页面设置全局变量，并且根据不同的环境传递不同的值。比如说后台的接口部署在了 http://localhost:3000
那么首先使用 webpack 定义一个叫 SERVICE 的全局变量

new webpack.DefinePlugin({
    SERVICE: "'http://localhost:3000'"
})

然后就可以在页面中使用这个全局变量，当然如果是在ts项目下的话，直接使用SERVICE会抱一个未定义的错，那么只需要在使用SERVICE的文件中申明一下即可，未使用ts 的可以跳过这句声明。

im