axios 封装

最近一直在写Vue项目，和后台交互用的是官方推荐的axios。

Axios 是一个基于 promise 的 HTTP 库

官方教程里面有详细的使用方法，在此就不做详细描述了~

我们如果在每个需要使用的页面都引入axios 然后写 get、post方法，代码就会变得非常的冗余，会有很多重复的代码，并且需要修改某些通用属性的时候，可能就要涉及到所有的文件。

哪些信息是可以作为公用的

一个完整项目中，所有接口中通用的内容一般包括：

• 服务器地址
• 请求成功统一状态码
• 请求失败不同状态对应的状态码
• 请求头
• …

开始封装

在文件目录src 下面新建一个api/api.js 文件夹和js文件，然后内部引用所需文件（此处错误信息通过自己封装的一个toast插件得以实现）：

import axios from 'axios'
import router from '../router/index.js'

const serverUrl = 'http://172.16.134.81:3344' // 本地测试地址

接下来我们开始封装get请求

// 封装axios get
export function axiosGet(url, params) {
  return axios({
    url: `${serverUrl}${url}`,
    method: 'get',
    params
  })
    .then(res => {
      if (res.data.code === 0) {
        return Promise.resolve(res.data)
      }
      return Promise.reject(res)
    })
    .catch(err => {
     return Promise.reject(err)
    })
}

这里说明一下：

• 这里的demo 是假设和后台约束了所有的返回体里面 都有code（状态码）、 body（数据内容）、 msg（信息描述）；
• code为0 则请求成功，将数据体 Promise.resolve()，这样就可以在.then()中获取；
• code不为0的状态都为错误状态 放入 Promise.reject()，然后再 catch()中获取错误信息；
• catch()中的错误处理，我们会另做特殊处理

然后我们再封装post请求：

// 封装axios post
export function axiosPost(url, data) {
  return axios({
    url: `${serverUrl}${url}`,
    method: 'POST',
    data: data,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  })
    .then(res => {
      if (res.data.code === 0) {
        return Promise.resolve(res.data)
      }
      return Promise.reject(res.data)
    })
    .catch(err => {
     return Promise.reject(err)
    })
}

然后封装一个用axios上传文件的请求：

// 文件上传
function axiosUpload(url, data, callback) {
  const params = data
  return axios
    .post(`${serverUrl}${url}`, params, {
    // 上传进度处理事件
      onUploadProgress(progressEvent) {
        if (progressEvent.lengthComputable) {
          callback(progressEvent)
        }
      }
    })
    .then((res) => {
      if (res.data.code === 0) {
        return Promise.resolve(res.data)
      }
      return Promise.reject(res.data)
    })
    .catch(err => {
      return Promise.reject(err)
    })
}

我们注册一个全局的mixin混入，内容是我们统一处理的一些错误提示，在main.js中：

const networkErr = ['404', '405', '500', '504', '205', '400', 'Network Error']
Vue.mixin({
  methods: {
    errorFun(err) {
      const status = networkErr.some((item) => {
        const errs = err.toString()
        return errs.includes(item)
      })
      if (status) {
        this.$toast('网络错误，请检查网络设置')
        return false
      }
      const response = err.response
      // 登陆过期处理
      if (response && response.data && response.data.code === 100009) {
        this.$toast('登录已过期，请重新登录')
        sessionStorage.clear()
        this.$router.push('/login')
        return false
      }
      this.$toast(err.data.msg)
    }
  }
})

这里面我只列举了一个特殊的处理方法（登陆过期）：
和后台约定 当接口返回的状态码为 100009时，则登录超时，此时需要在页面弹出一个message提示，并且清空sessionStorage（如果项目中没有使用则忽略）并且将页面跳转到登录页面
如果还有其他公用的错误提示（例如 500 等）都可以在统一的错误函数中写好，这样就不用再每个页面都重复的写上这些错误处理。然后将这些公用错误之外的其他错误信息返回页面的catch()方法中单独处理~

此时，主要三种请求方法已经封装完成，那么我们怎么使用这三个封装的方法去请求接口呢?

如何使用

在 api.js 后面继续写入具体的接口调用：

// 登录
export function postLogin(data = {}) {
  const url = '/access/login'
  return axiosPost(url, data)
}
// 登出
export function getLogout(data = {}) {
  const url = '/access/logout'
  return axiosGet(url, data)
}
// 资质认证--文件上传
export function postUploadFile(data = {}, callback) {
  const url = '/upload/add'
  return axiosUpload(url, data, callback)
}

这个时候，我们的api.js也算是大功告成了。在Vue文件中我们应该如何调用：

import { postLogin, getLogout, postUploadFile } from '@/api/api.js';
export default {
  methods: {
    /**
     * 登录
     */
    login() {
      const data = {
        name: 'xxxxx',
        password: 'xxxxxxx'
      };
      postLogin(data)
        .then(res => {
          Message({
            message: '登录成功',
            type: 'success'
          });
        })
        .catch(err => {
          this.errorFun(err)
        });
    },
    /**
     * 登出
     */
    logout() {
      getLogout()
        .then(res => {
          // 退出操作
        })
        .catch(err => {
          this.errorFun(err)
        });
    },
    /**
     * 上传文件
     */
    fileChange(e) {
      const params = new FormData();
      const file = e.target.files[0];
      const reader = new FileReader();
      reader.readAsDataURL(file);
      params.set('file', file);
      if (file.size <= 1000000) {
        postUploadFile(params, pro => {
          // pro 为上传进度相关的数据,再此将进度映射到页面中
        })
          .then(res => {
            reader.onload = (() => {
              this.imgUrl = reader.result; // 图片预览 base64码
            })();
          })
          .catch(err => {
            this.errorFun(err)
          });
      }
    }
  }
};

至此，一个完整的axios请求封装与调用已经完成~

本文章的很多写法和理念还不够完善，本人也只是个前端海洋中的一条淡水鱼，在此希望得到广大同行们的指教，共同进步！