axios完美封装 请求和响应统一管理架构

axios完美封装 请求和响应架构封装 此文持续更新中。

axios 请求统一处理相关参数，对返回拦截做公共处理
直接上源码和实例进行讲解。

export const commonParams = {}
import axios from 'axios'
import qs from 'qs';

const instance = axios.create({
  baseURL: 'http://test.www.wenlemo.com',
  timeout: 20000,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    'Accept': 'application/json',
    'Client-Version': 'web-0.0.1',
    'uuid': 'web',
    'uuidKey': '201804082117257059'
  }
});

/**
 * 拦截响应response，并做一些错误处理
 */
instance.interceptors.response.use((response) => {
  const data = response.data
  console.info("response", response)

  if(data){
    switch (data.status) {
      case '0':
        //处理相关业务
        return data
      // 需要重新登录
      case '0005':
        //写相关需要登录的代码
          location.replace(`/user/login?${search}`)
        // 不显示提示消息
        data.message = ''
        break
      default:
    }
    return response
  }else{
    const err = new Error("未知错误，请重试")
    err.data = data
    err.response = response
    throw err
  }
// 根据返回的code值来做不同的处理（和后端约定）
}, function (err) {
  if (err && err.response) {
    switch (err.response.status) {
      case 400:
        err.message = '请求参数错误'
        break

      case 401:
        err.message = '未授权，请登录'
        break

      case 403:
        err.message = '跨域拒绝访问'
        break

      case 404:
        err.message = `请求地址出错: ${err.response.config.url}`
        break

      case 408:
        err.message = '请求超时'
        break

      case 500:
        err.message = '服务器内部错误'
        break

      case 501:
        err.message = '服务未实现'
        break

      case 502:
        err.message = '网关错误'
        break

      case 503:
        err.message = '服务不可用'
        break

      case 504:
        err.message = '网关超时'
        break

      case 505:
        err.message = 'HTTP版本不受支持'
        break

      default:
    }
  }

  return Promise.reject(err)
})

export default axios

/**
 * get请求
 * @param urlLink
 * @param param
 * @returns {Promise<AxiosResponse>}
 */
export function getData(urlLink, param) {
  const url = urlLink
  const data = Object.assign({}, commonParams, param)

  return instance.get(url, {
    params: data,
    timeout: 5000
  })
    .then((res) => {
      console.info("then", res)
      return Promise.resolve(res.data)
    })
    .catch(function (error) {
      console.info("error", error)
      return Promise.resolve(error.data)
    });
}

/**
 * post请求
 * @param urlLink
 * @param param
 * @returns {Promise<AxiosResponse>}
 */
export function postData(urlLink, param) {
  const data = Object.assign({}, commonParams, param)
  return instance.post(urlLink, qs.stringify(data))
    .then((res) => {
      return Promise.resolve(res.data)
    })
    .catch(function (error) {
      console.info("postDataerror", error)
      return Promise.resolve(error)
    });
}

其中qs和axio 需要先安装好

npm install qs –save
npm install axios –save

具体使用方法

      import {getData,postData} from "../../service/js/http_utils"

            //具体调用实例。
           let param = {
              email: this.ruleRegisterForm.email,
              verifyCode: this.ruleRegisterForm.vcode,
              pwd: this.ruleRegisterForm.password,
              userName: this.ruleRegisterForm.account,
            }
            postData(urlObj.userSignUp, param).then((res) => {
              if (res.status === STATUS_OK) {
                this.$message.success("注册成功");
              }else{
                console.info("message.err",res)
                this.$message.error(res.message);
              }
            })

---

使用的好的话，或是有问题 随时评论区进行提问和点赞。