axios在vue-cli项目中的封装使用

axios是一个promise实现的http库，符合最新的ES规范。我们为啥要用这个东西呢，主要有以下几个原因：

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 支持 Promise API（可以配合ES7的async await使用，解决回调地狱）
  • 客户端支持防止CSRF
  • 提供了一些并发请求的接口
  • 轻量，体积小

搞起

要想把axios装项目，拢共分3部：

  1. IE兼容性处理
  2. 封装、配置axios
  3. 把他挂到vue的prototype上（这样就不用每个文件都引入了）

IE兼容处理

axios是promise实现的，提到promise，首先应该想到IE不支持，所以应该先加个垫片，给IE做下兼容性处理
npm install --save babel-polyfill

然后再main.js中引入

import 'babel-polyfill'

封装axios

先安装axios
npm install --save axios

然后建议在src下新建一个文件夹api专门用来存放接口相关的文件和配置，贴一下我的目录结构

src
├── ...
├── main.js
├── App.vue
├── api
    ├── unsplash
        ├── index.js
        └── urls.js
    ├── apiList.js
    ├── axios.js
    ├── index.js
    └── install.js
└── common    #工具文件夹
    ├── utils.js
    └── browser.js

下面是请求和响应拦截等相关配置
需要的同学点这个看代码browser.js
src/api/axios.js

import axios from 'axios'
import browser from '../common/browser'

// 创建 axios 实例
let http = axios.create({
  // headers: {'Content-Type': 'application/json'},
  timeout: 60000
})

// 设置 post、put 默认 Content-Type
http.defaults.headers.post['Content-Type'] = 'application/json'
http.defaults.headers.put['Content-Type'] = 'application/json'

// 添加请求拦截器
http.interceptors.request.use(config => {
  if (config.method === 'post' || config.method === 'put') {
    // post、put 提交时，将对象转换为string, 为处理Java后台解析问题
    config.data = JSON.stringify(config.data)
  } else if (config.method === 'get' && browser.isIE) {
    // 给GET 请求后追加时间戳， 解决IE GET 请求缓存问题
    let symbol = config.url.indexOf('?') >= 0 ? '&' : '?'
    config.url += symbol + '_=' + Date.now()
  }
  // 请求发送前进行处理
  return config
}, error => {
  // 请求错误处理
  return Promise.reject(error)
})

// 添加响应拦截器
http.interceptors.response.use(response => {
  let {data} = response
  return data
}, error => {
  let info = {}
  let {status, statusText, data} = error.response
  if (!error.response) {
    info = {
      code: 5000,
      msg: 'Network Error'
    }
  } else {
    // 此处整理错误信息格式
    info = {
      code: status,
      data: data,
      msg: statusText
    }
  }
  return Promise.reject(info)
})

/**
 * 创建统一封装过的 axios 实例
 * @return {AxiosInstance}
 */
export default function () {
  return http
}

如果需要前端做登陆校验的，可以在上面的请求拦截器中添加相关逻辑
其他配置项还有很多，具体可以查看axios中文说明

封装常用请求方法
src/api/index.js

import axios from './axios'

let instance = axios()
export default {
  get (url, params, headers) {
    let options = {}
    if (params) {
      options.params = params
    }
    if (headers) {
      options.headers = headers
    }
    return instance.get(url, options)
  },
  post (url, params, headers) {
    let options = {}
    if (headers) {
      options.headers = headers
    }
    return instance.post(url, params, options)
  },
  put  (url, params, headers) {
    let options = {}
    if (headers) {
      options.headers = headers
    }
    return instance.put(url, params, options)
  },
  delete (url, params, headers) {
    let options = {}
    if (params) {
      options.params = params
    }
    if (headers) {
      options.headers = headers
    }
    return instance.delete(url, options)
  }
}

到此axios就封装好了

接下来我们把接口的URL和调用方法也写在这个文件夹里，建议按模块划分文件夹。下面用图片网站unsplash的api举例说明，此处肯定要涉及到跨域问题，如果对跨域问题不了解，推荐一篇文章，讲的很棒。
unsplash的做法是CORS，全称是"跨域资源共享"（Cross-origin resource sharing）跨域资源共享 CORS 详解，前端啥也不用做，正常发请求就ok了

src/api/unsplash/url.js（这个文件存放所有模块相关URL地址）

const baseUrl = 'https://api.unsplash.com'

export default {
  // 图片列表
  photos: baseUrl + '/photos'
}

src/api/unsplash/index.js

import api from '../index'
import urls from './urls'
// import { formatUrl } from '../../common/utils'
// 这个东西是unsplash要求加在header里的验证，有兴趣的同学可以去看他的api，此处不再赘述
const header = {
  'Authorization': 'Client-ID xxxxxxx'
}

export default {
  viewPhotos (params) {
    // return出去了一个promise
    return api.get(urls.photos, params, header)
  }
}

这些都做完之后，把所有模块的调用都整合到一个文件里，（这里拆这么细，项目比较大，模块比较多的时候就会体现出好处，方便统一管理）

src/api/apiList.js

// 有多少import多少
import unsplash from './unsplash'

export default {
  unsplash
}

挂到Vue的prototype

该配的该写的都整完了，最后一步把大象装冰箱。。啊不，是把他挂prototype上

src/api/install.js

// 导入模块
import apiList from './apiList'

const install = function (Vue) {
  if (install.installed) return
  install.installed = true
  Object.defineProperties(Vue.prototype, {
    $api: {
      get () {
        return apiList
      },
      enumerable: false, // 不可枚举
      configurable: false // 不可重写
    }
  })
}

export default {
  install
}

最后把这个install.js在main.js里引一下，再use一下就ok了

import 'babel-polyfill'
import Vue from 'vue'
import api from './api/install'
import App from './App'
import router from './router'
import store from './store'

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

接下来我们就可以愉快地使用了

随便找个页面

<template>
  <div class="waterfall">
  </div>
</template>

<script>
  export default {
    name: 'waterfall',
    data () {
      return {
        photosList: []
      }
    },
    created () {
      this.getPhotos()
    },
    mounted () {
    },
    computed: {
    },
    watch: {
    },
    methods: {
      // async await 是ES7新特性，本质上是generator函数的语法糖
      async getPhotos () {
        // 这里用try catch包裹，请求失败的时候就执行catch里的
        try {
          let params = {
            page: 1,
            per_page: 1,
            order_by: 'latest'
          }
          let res = await this.$api.unsplash.viewPhotos(params)
          this.photosList = res
          console.log(res)
        } catch (e) {
          console.log(e)
        }
      }

    }
  }
</script>

<style lang="less">
</style>

如果报了async await的错，就还得配一下根目录的.babelrc，先安装
npm install --save-dev babel-plugin-transform-runtime
npm install --save-dev babel-preset-stage-0

.babelrc

{
  "presets": [
    ["env", { "modules": false }],
    "stage-0"
  ],
  "plugins": [[
    "transform-runtime",
    {
      "helpers": false,
      "polyfill": false,
      "regenerator": true,
      "moduleName": "babel-runtime"
    }
  ]]
}

总结

以上就是把axios整合进项目的全部步骤，一般项目配置这些就够用了，要想玩儿的更6，还是得撸文档啊。。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 202,905评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,140评论 2赞 379
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,791评论 0赞 335
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,483评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,476评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,516评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,905评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,560评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,778评论 1赞 296
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,557评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,635评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,338评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,925评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,898评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,142评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,818评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,347评论 2赞 342

推荐阅读更多精彩内容