axios的封装

下面是我用promise对按axios的封装
新建一个http.js

import axios from 'axios'
import qs from 'qs'
// options中包含着数据
export default function httpAjax (options, loading = true) {
  return new Promise((resolve, reject) => {
    var data = options.data
    const instance = axios.create({
      timeout: 30000
      // instance创建一个axios实例，可以自定义配置，可在 axios文档中查看详情
      // 所有的请求都会带上这些配置，比如全局都要用的身份信息等。
      // headers: { // 所需的信息放到header头中
      //   // 'Content-Type': 'application/json',
      //   'Authorization': token,
      //   'X-CID': cid,
      //   'X-LOCALE': language,
      //   'X-SIGN': sign_str
      // }
      // timeout: 30 * 1000 //30秒超时
    })
    //loading为true的时候显示加载框，我这里用的是element-ui的加载框
    if (loading) {
      this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      loading = false
    }
    let httpDefaultOpts = { // http默认配置
      method: options.method,
      url: options.url,
      timeout: 6000,
      params: Object.assign(data),
      data: qs.stringify(Object.assign(data))
      //headers也可以重写会覆盖与合并上面的默认配置
      // headers: options.method=='get'?{
      //     'X-Requested-With': 'XMLHttpRequest',
      //     "Accept": "application/json",
      //     "Content-Type": "application/json; charset=UTF-8",
      //     "Authorization": token
      // }:{
      //     'X-Requested-With': 'XMLHttpRequest',
      //     'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
      //     "Authorization": token
      // }
    }
    if (options.method === 'get') { // 判断是get请求还是post请求
      delete httpDefaultOpts.data
    } else {
      delete httpDefaultOpts.params
    }
    instance(httpDefaultOpts)
      .then(response => { // then 请求成功之后进行什么操作
        this.$loading().close()    //加载框消失
        switch (response.data.code) {
          case 404:
            window.location.href = '/#/error' // 跳转到报错页面
            break
          case 500:
            // 可以提示信息或者跳转到报错页面等
            break
          case 200:
            resolve(response)
            break
        }
      })
      .catch(error => {
        this.$loading().close()
        // console.log('请求异常信息=>：' + options.params + '\n' + '响应' + error)
        reject(error)
      })
  })
}

main.js中

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import $axios from './assets/http.js'
Vue.prototype.$axios = $axios
Vue.config.productionTip = false
Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

页面调取接口使用的时候

 let options = {
        url: process.env.base + '/manager/apply_materials',
        method: 'post',
        data: {
          er_id: 6,
          node_id: 1
        }
      }
      this.$axios(options, true).then(res => {
        console.log(res)
      }).catch(err => {
        console.log(err)
      })

扩展：将axios的拦截也封装进去
http.js封装：

import axios from 'axios'
import qs from 'qs'
// options中包含着数据
export default function httpAjax (options, loading = true) {
  const CancelToken = axios.CancelToken
  return new Promise((resolve, reject) => {
    var data = options.data
    const instance = axios.create({
      timeout: 30000
      // instance创建一个axios实例，可以自定义配置，可在 axios文档中查看详情
      // 所有的请求都会带上这些配置，比如全局都要用的身份信息等。
      // headers: { // 所需的信息放到header头中
      //   // 'Content-Type': 'application/json',
      //   'Authorization': token,
      //   'X-CID': cid,
      //   'X-LOCALE': language,
      //   'X-SIGN': sign_str
      // }
      // timeout: 30 * 1000 //30秒超 时
    })
    if (loading) {
      this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      loading = false
    }
    let httpDefaultOpts = { // http默认配置
      method: options.method,
      url: options.url,
      timeout: 6000,
      params: Object.assign(data),
      data: qs.stringify(Object.assign(data)),
      // headers: options.method=='get'?{
      //     'X-Requested-With': 'XMLHttpRequest',
      //     "Accept": "application/json",
      //     "Content-Type": "application/json; charset=UTF-8",
      //     "Authorization": token
      // }:{
      //     'X-Requested-With': 'XMLHttpRequest',
      //     'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
      //     "Authorization": token
      // }
      //axios拦截配置
      cancelToken: new CancelToken((cancel) => {
      // 这个参数 cancel 就是CancelToken构造函数里面自带的取消请求的函数，这里把该函数当参数用
        this.cancelFun = cancel  //cancelFun 要在页面的data中定义
      })
    }
    if (options.method === 'get') { // 判断是get请求还是post请求
      delete httpDefaultOpts.data
    } else {
      delete httpDefaultOpts.params
    }
    instance(httpDefaultOpts)
      .then(response => { // then 请求成功之后进行什么操作
        this.$loading().close()
        switch (response.data.code) {
          case 404:
            window.location.href = '/#/error' // 跳转到报错页面
            break
          case 500:
            // 可以提示信息或者跳转到报错页面等
            break
          case 200:
            resolve(response)
            break
        }
      })
      .catch(error => {
        this.$loading().close()
        // console.log('请求异常信息=>：' + options.params + '\n' + '响应' + error)
        reject(error)
      })
  })
}

页面调用的时候：

let options = {
        url: process.env.base + '/manager/apply_materials',
        method: 'post',
        data: {
          er_id: 6,
          node_id: 1
        }
      }
      // this.axios.post('/api/manager/apply_materials', {
      //   er_id: 6,
      //   node_id: 1
      // }).then(res => {
      //   console.log(res)
      // }).catch(err => {
      //   console.log(err)
      // })
      this.$axios(options, true).then(res => {
        console.log(res)
      }).catch(err => {
        console.log(err)
      })
      setTimeout(() => {
        this.cancelFun('请求取消')  //调用cancelFun就会取消请求的发送，
      })

cancelFun函数里面的参数可以打印在页面上，目前只知道这个用处。

如有不足或者错误之处，欢迎指正

参考了下面两位大佬的文章，特此感谢
https://www.jianshu.com/p/8e0967785c3b?utm_source=oschina-app
https://segmentfault.com/q/1010000017347607