从0到1使用VUE-CLI3开发实战（四）: Axios封装

从0到1使用VUE-CLI3开发实战（四）: Axios封装

有不少同窗看了本系列的前几篇以后建议我暂时先不用TS，因而小肆以后将把TS换成JS继续下面的文章。
今天给你们带来项目中很是重要的一环，配置Axios,一块儿来看看吧。

axios 简介

首先要明白的是axios是什么：axios是基于promise（诺言）用于浏览器和node.js是http客户端。

axios的做用是什么呢：axios主要是用于向后台发起请求的，还有在请求中作更可能是可控功能。

• 从浏览器中建立 XMLHttpRequest
• 从 node.js 发出 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防止 CSRF/XSRF

项目配置

首先固然仍是要安装啦：

npm install axios

以后咱们新建一个api文件夹用来放接口和axios的配置。
先给你们看看我配置好以后的文件夹目录结构：

能够说此次配置是我划分的比较详细的配置方法了，具体每一个文件都分别作什么用，咱们如今来看看吧。

axios.js

这个文件主要建立axios实例并对拦截器进行配置，不理解拦截器的同窗能够看看下图：

import axios from 'axios'

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

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

// 添加请求拦截器
service.interceptors.request.use(
  (config) => {
    if (config.method === 'post' || config.method === 'put') {
      // post、put 提交时，将对象转换为string, 为处理Java后台解析问题
      config.data = JSON.stringify(config.data)
    }
    // 请求发送前进行处理
    return config
  },
  (error) => {
    // 请求错误处理
    return Promise.reject(error)
  }
)

// 添加响应拦截器
service.interceptors.response.use(
  (response) => {
    let { data } = response
    return data
  },
  (error) => {
    let info = {},
      { status, statusText, data } = error.response

    if (!error.response) {
      info = {
        code: 5000,
        msg: 'Network Error'
      }
    } else {
      // 此处整理错误信息格式
      info = {
        code: status,
        data: data,
        msg: statusText
      }
    }
  }
)

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

index.js

index.js文件主要封装咱们几个经常使用的方法，get、post、put、delete

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, data) {
    let options = {}

    if (params) {
      options.params = params
    }
    if (headers) {
      options.headers = headers
    }
    return instance.post(url, data, 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)
  }
}

install.js

install.js文件能够把咱们全部的api接口安装到全局，以后咱们在main.js文件中导入就能够了。

import apiList from './apiList'

const install = function(Vue) {
  if (install.installed) {
    return
  
  install.installed = true
  Object.defineProperties(Vue.prototype, {
    $api: {
      get() {
        return apiList
      }
    }
  })
}

export default {
  install
}

main.js中添加：

import api from './api/install'
Vue.use(api)

apiList.js

把咱们全部的api文件夹导入到这一个文件中来。

import matches from './matches'
import user from './user'

export default {
  matches,
  user
}

baseUrl.js

根据不一样的环境设定不一样的baseUrl，在配置这个文件前，咱们先须要作以下几件事：
1.根目录新建.env.dev文件并在文件内写入NODE_ENV = 'dev'
2.在package.json文件内添加：

"build:dev": "vue-cli-service build --mode dev",
 "build:pre": "vue-cli-service build --mode pre",

如下是baseUrl.js的代码：

let baseUrl = '/api' // 本地代理

switch (process.env.NODE_ENV) {
  case 'dev':
    baseUrl = 'http://testserver.feleti.cn/' // 测试环境url
    break
  case 'pre':
    baseUrl = 'https://pre-server.feleti.cn' // 预上线环境url
    break
  case 'production':
    baseUrl = 'https://api.feleti.cn' // 生产环境url
    break
}

export default baseUrl

matches、user

这两个文件夹都是根据api类型进行区分的，在项目之后也建议你们根据api类型划分出不一样的文件存放，在小项目中这样作可能显得很麻烦，但若是项目比较大，这样作的优点就体现出来了。

咱们就只看看matches文件夹下的内容：

urls.js

把一个类型下的全部url接口放入这一个文件，我只放了一个暂时，能够继续添加。

import baseUrl from '../baseUrl'
export default {
  matches: baseUrl + '/matches'
}

index.js

有些接口须要在header中添加token或是其余，能够按以下配置。

import api from '../index'
import urls from './urls'

const header = {}

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

配置完上述所有文件就算是大功告成了，下面咱们看看如何使用吧。

组件中调用

created() {
    this.matches()
  },
  methods: {
    async matches() {
      // 这里用try catch包裹，请求失败的时候就执行catch里的
      try {
        //定义参数对象
        let params = {
          type: 'zc'
        }
        let res = await this.$api.matches.matches(params)

        console.log('​getMatches -> res', res)
      } catch (e) {
        console.log('​catch -> e', e)
      }
    }
  }

以后咱们就能够在控制台看到咱们调用成功的输出日志啦：

小结

在实际工做中，咱们尽可能要把项目作的细致一些，尤为是项目开始以前的配置，今天所涉及到的不少文件在以后的配置中还会有进步的更改，好比配置用户相关的接口、配置全局loading等，你们只要能把今天的内容彻底理解，以后再配置这里就很容易啦。

前置阅读：

1. 用vue-cli3从0到1作一个完整功能手机站（一）
2. 从0到1开发实战手机站（二）：Git提交规范配置
3. 从0到1使用VUE-CLI3开发实战（三）: ES6知识储备