axios的二次封装

---

前言

为什么需要二次封装

api 统一管理,不管接口有多少,所有的接口都可以非常清晰,容易维护.

---

一、基本页面的创建

首先需要准备一个vue的项目

1. 先打开需要创建项目的文件夹下方输入cmd打开窗口
2. 在窗口输入vue create 项目的名称
3. 选择使用vue2.x版本
4. 等待创建，完成后进入文件夹内部在控制台输入npm run serve

二、使用步骤

1.引入相关的包

首先我们需要下载有关的包：

我们需要下载axios、element-ui(辅助)

npm i axios@0.18.1
npm i element-ui@2.13.2

2.编写文件

在src下创建文件夹utils，在文件夹内部创建文件request.js

编写代码如下（示例）：

import axios from 'axios'
import { Message } from 'element-ui'

const service = axios.create({
  baseURL: 'http://127.0.0.1:3030', 
  timeout: 5000 ,
  withCredentials: false // 表示跨域请求时是否需要使用凭证
})

// 请求拦截器
service.interceptors.request.use(
  config => {

    return config
  },
  error => {
    // do something with request error
    console.log(error) 
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(

  response => {
    return response.data
  },
  error => {
    console.log('err' + error)
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

在api下新建index.js文件用于汇总各个部分的接口代码入下：

// 将模块统一暴露
import * as attr from './product/attr'

//对外暴露
export default {
     attr
}

在main.js入口文件就可以导入该文件，并且挂载到Vue的原型上方便调用，代码入下：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 引入api请求接口
import API from '@/api'

Vue.prototype.$API = API

new Vue({
  render: h => h(App),
}).$mount('#app')

此时我们的简单封装就做好了

3.编写请求

在src下创建文件夹api，用于储存各个部分的接口，在api文件夹下再创建文件product用于收集product

部分的接口，在该文件夹下创建attr.js文件，用于书写请求，示例代码入下:

// product管理模块的数据
import request from '@/utils/request'

// 获取分类列表
export function reqCateGoryList() {
  return request({
    url: '/info',
    method: 'get'
  })
}

4.解决跨域

在前端的开发中，为了避免一些数据的发起和请求的地址发生跨域的问题，我们需要配置代理来解决

跨域

我们需要找到vue.config.js文件，编写解决跨域的代码，文件的代码如下

module.exports = {
  lintOnSave: false, //关闭eslint检查
  devServer: {
    open: true,
    // 解决代理跨域问题
    proxy: {
      '/dev-api': {
        target: 'http://127.0.0.1:3030',
        pathRewrite: { '^/dev-api': '' },
        changeOrigin: true
      }
    }
  }
}

5.测试使用

简单编写App.vue的代码用于测试

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <button @click="reqCateGory1List">测试</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      list1: ''
    }
  },
  methods: {
    async reqCateGory1List() {
      const res = await this.$API.attr.reqCateGoryList()
      if (res.code == 200) {
        this.list1 = res.data
        console.log(res.data)
      }
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

此时的控制台就可以输出数据了

---

总结

axios的二次封装展现了代码的模块化的思想，将各个区域的接口分工划分的十分明确

后面结合vuex可以得到跟好的管理