五、mpvue里axios封装使用

axios.js

import axios from 'axios'
import Qs from 'qs'
// 时间戳
// const NewTimeStamp = new Date().getTime()
// 定义请求类
class HttpRequest {
  constructor (baseUrl = baseURL) {
    this.baseUrl = baseUrl
    this.queue = {}
  }
  getInsideConfig () {
    const config = {
      baseURL: this.baseUrl,
      headers: {}
    }
    return config
  }
  // 小程序自定义处理请求
  adapter (instance) {
    instance.defaults.timeout = 30000
    instance.defaults.adapter = function (config) {
      return new Promise((resolve, reject) => {
        // console.log(config,'adapter')
        let data = config.method === 'get' ? config.params : Qs.stringify(JSON.parse(config.data))
        // wx小程序 发起请求相应 log 就可以看到熟悉的返回啦
        // console.log(typeof config.data, config, data)
        wx.request({
          url: config.url,
          method: config.method,
          data: data,
          header: {
            'content-type': 'application/x-www-form-urlencoded;charset=UTF-8' // 默认值
          },
          success: (res) => { return resolve(res) },
          fail: (err) => { return reject(err) }
        })
      })
    }
  }
  distroy (url) {
    delete this.queue[url]
    if (!Object.keys(this.queue).length) {
      // Spin.hide()
    }
  }
  // 拦截器
  interceptors (instance, url) {
    // 请求拦截
    instance.interceptors.request.use(config => {
      // 添加全局的loading...
      if (!Object.keys(this.queue).length) {
        // Spin.show() // 不建议开启，因为界面不友好
      }
      this.queue[url] = true
      // 统一拦截添加token
      config.params = {}
      // config.params.token = getToken()
      return config
    }, error => {
      return Promise.reject(error)
    })
    // 响应拦截
    instance.interceptors.response.use(res => {
      this.distroy(url)
      const { data, status } = res
      // 接口token过期处理
      // if (res.data.Code === -202) {
      //   router.push({ name: 'login', params: { failure: true } })
      //   // return Promise.reject(new Error(res.data.Message).message)
      // }
      return { data, status }
    }, error => {
      this.distroy(url)
      return Promise.reject(error)
    })
  }
  // 请求开始
  request (options) {
    const instance = axios.create()
    this.adapter(instance)
    options = Object.assign(this.getInsideConfig(), options)
    this.interceptors(instance, options.url)
    return instance(options)
  }
}
export default HttpRequest

api.request.js

import HttpRequest from '@/utils/axios'
import config from '@/config'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro

const axios = new HttpRequest(baseUrl)
export default axios

config->index.js

export default {
  /**
   * @description token在Cookie中存储的天数，默认1天
   */
  cookieExpires: 1,
  /**
   * @description 是否使用国际化，默认为false
   *              如果不使用，则需要在路由中给需要在菜单中展示的路由设置meta: {title: 'xxx'}
   *              用来在菜单中显示文字
   */
  useI18n: false,
  /**
   * @description api请求基础路径
   */
  ajaxHeader: {'Content-Type': 'application/x-www-form-urlencoded'},
  baseUrl: {
    dev: 'https://www.easy-mock.com/mock/5ca562c77d30ce373280859f/example',
    // dev: 'http://192.168.1.168:8080/hzx-erp-service-8088',
    // dev: 'http://192.168.1.151:9088/hzx-erp-service-8088',
    pro: 'http://192.168.1.151:9088/hzx-erp-service-8088'
  }
}

index.vue 调用

<template>
  <div class="followRecords">
    <i-button @click="handleClick">默认按钮</i-button>
    <i-button @click="handleClick" type="error" long="true">联通两边按钮</i-button>
    <i-button @click="handleClick" type="primary">Primary</i-button>
    <i-button @click="handleClick" type="ghost">Ghost</i-button>
    <i-button @click="handleClick" type="info">Info</i-button>
    <i-button @click="handleClick" type="success">Success</i-button>
    <i-button @click="handleClick" type="warning">Warning</i-button>
    <i-button @click="handleClick" type="error">Error</i-button>
  </div>
</template>
<script>
// import axios from '../../utils/axios'
// import Qs from 'qs'
import axios from '@/utils/api.request'
export default {
  name: 'followRecords',
  data () {
    return {
    }
  },
  mounted () {
    let cc = {
      name: '88888Fred',
      lastName: 'Flintstone'
    }
    axios.request({
      url: '/test',
      method: 'post',
      // headers: config.ajaxHeader,
      data: cc
    }).then(response => {
      console.log(response)
    })

    // axios.post('https://www.easy-mock.com/mock/5ca562c77d30ce373280859f/example/test', Qs.stringify(cc)).then(function (response) {
    //   console.log(999, response)
    // }).catch(error => {
    //   console.log(888, error)
    // })
  },
  methods: {
    handleClick (e) {
      console.log(e)
    }
  }
}
</script>
<style>
</style>