记录一下工作中第一次简单封装axios，先献上axios的GitHub地址

它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御cSRF等。尤大大也推荐我们使用axios库,

基本封装要求

• 由于Element的Loading是全局等待条，每次请求都需要显示，为了减少操作就做了一下简单的封装
• 根据情况，在请求参数中添加showLoading=true，自行显示全局等待条。
• 统一 url 配置
• 统一api 请求
• request (请求)拦截器，例如：带上token等，设置请求头
• response (响应)拦截器，例如：统一错误处理，页面重定向等
• 将 axios 封装成 Vue 插件使用

安装

   cnpm install axios;    //使用淘宝镜像安装axios

引入

一般我会在项目的src目录中，新建一个api.js文件

第一步：配置axios

import Axios from 'axios'           //在http.js引入axios
import qs from 'qs'          //引入qs模块，用来序列化post类型的数据
import { Message, Loading } from 'element-ui';
const ConfigBaseURL = 'https://localhost:8080/'     //默认路径，这里也可以使用env来判断环境
let loadingInstance = null //这里是loading

//使用create方法创建axios实例
export const Service = axios.create({
  timeout: 7000, // 请求超时时间
  baseURL: ConfigBaseURL,
  method: 'post',
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
})

// 添加请求拦截器
Service.interceptors.request.use(config => {
  loadingInstance = Loading.service({
    lock: true,
    text: '加载中...'
  })
  return config
})
// 添加响应拦截器
Service.interceptors.response.use(response => {
  loadingInstance.close()
  // console.log(response)
  return response.data
}, error => {
  console.log('TCL: error', error)
  const msg = error.Message !== undefined ? error.Message : ''
  Message({
    message: '网络错误' + msg,
    type: 'error',
    duration: 3 * 1000
  })
  loadingInstance.close()
  return Promise.reject(error)
})

具体的拦截器逻辑以具体业务为准，我这里没什么逻辑，只是加了一个全局的loading。

第二步封装请求

这里再创建一个request.js，这里放的是具体请求(可以按模块放)

    //导入api.js
    import service from './api'
    import qs from 'qs'
    export function getOffersList(productId) {
      return Service({
       url: '/manager/getOffersList',
       params: {List: List }
      })
    }
    export function getOffersid() {
      return Service({
      url: '/manager/getOffersid ',
      method: 'get'
      })
    }
    export function getOffersparticulars(data) {
      return Service({
        url: '/manager/getOffersparticulars',
         method: 'post',
        data: JSON.stringify(data)
      })
    }

第三步在vue组件中使用

    import {getOffersList,getOffersid,getOffersparticulars} from '@/api/request.js'
    getOffersList(data).then(res=>{
        console.log(res)
    })

全局使用 在main.js中

import {Service} from '@/api/api.js'
Vue.prototype.$axios=Service

总结

• 第一次封装可能不够严谨
• 封装回调有点多，在使用的时候也需要加上 then()来处理结果，async & await 了解一下哟，好东西当然要藏起来，我才不会告诉你们下次我想分享出来...
• 第一次写文章如有错误请告知

PS：IE9 不支持 Promise ，需要安装一个 polyfill

import 'babel-polyfill'