vue封装axios+promise

## 1.安装axios、qs

``` bash

  npm install axios --save

  npm install qs --save

```

Promise有三种状态:

  1.pending: 等待中，或者进行中，表示还没有得到结果

  2.resolved: 已经完成，表示得到了我们想要的结果，可以继续往下执行

  3.rejected: 也表示得到结果，但是由于结果并非我们所愿，因此拒绝执(用catch捕获异常)

 

axios特点:

  1.从浏览器中创建 XMLHttpRequests

  2.从 node.js 创建 http 请求

  3.支持 Promise API

  4.拦截请求和响应 （就是有interceptor）

  5.转换请求数据和响应数据

  6.取消请求

  7.自动转换 JSON 数据

  8.客户端支持防御 XSRF

 

## 2.在src目录下创建api文件夹，然后在下一级创建api.js、http.js

 http.js

 ``` bash

  import axios from 'axios' // 引入axios

  import store from '../store/index' // 引入Vuex

  import router from '../router' // 引入vue-router

  import { Message } from 'element-ui' //局部引入UI框架组件

  if(process.env.NODE_ENV == 'development'){

      axios.defaults.baseURL = "" //开发环境

    }else if(process.env.NODE_ENV == 'debug'){

      axios.defaults.baseURL = "" //调试环境

    }else if(process.env.NODE_ENV == 'production'){

      axios.defaults.baseURL = "" //线上环境

    }

 

  axios.defaults.timeout = 100000; // 响应超时设置

 

  //添加请求拦截器

  axios.interceptors.request.use(

    config => {

      if (sessionStorage.getItem('Authorization')) {

        config.headers.Authorization = `Bearer` + " " + sessionStorage.getItem('Authorization'); //查看是否存在token

        return config;

      } else if (config.isUpload) {

        config.headers = { 'Content-Type': 'multipart/form-data'} // 根据参数是否启用form-data方式

        return con