mpVue框架封装axios方法

首先npm一下axios和qs

npm install axios --save
npm install qs --save

目录配置 (个人习惯, 可以酌情修改)

src/common // 存放公共类
src/config/index.js // 存放公共配置文件
src/api // 分文件夹存放API接口

首先是axios.js核心文件

src/common/http/axios.js

import axios from 'axios'
import Qs from 'qs'

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) => {
                let data = config.method === 'get' ? config.params : Qs.stringify(JSON.parse(config.data))
                // 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

然后是axios应用文件

src/common/http/api-request.js

import HttpRequest from './axios'
import config from '@/config'

const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro

const axios = new HttpRequest(baseUrl)

/**
 * http post请求
 * @param url请求的url地址
 * @param params 基于post请求参数，格式必须是json，例如{id: '1111'}
 * @param config 其他配置，一般是用于配置其他属性
 */
export function post (url, data, config) {
    let options = {url: url, data: data, method: 'post'}
    let opt = config ? Object.assign(config, options) : options
    return axios.request(opt)
}

/**
 * http get请求
 * @param url请求的url地址
 * @param params 基于get请求参数，格式必须是json，例如{id: '1111'}
 * @param config 其他配置，一般是用于配置其他属性
 */
export function get (url, params, config) {
    let options = {url: url, method: 'get', params: params}
    let opt = Object.assign(options, config)
    return axios.request(opt)
}

export default {
    axios,
    post: post,
    get: get
}

接着配置公共参数

src/config/index.js

export default {
    /**
     * @description 接口地址
     */
    apiUrl: 'http://127.0.0.1:8080',
    /**
     * @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: '/api/',
        pro: '/api/'
    },
  }

新建API文件, 这里后期可以根据业务来存放不同的API

src/api/test/testAPI.js

import http from '@/common/http/api-request.js'
import config from '@/config'

export default {
    testAPI: function (param) {
        return http.post(config.apiUrl + '/service/getServiceInfo', param)
    }
}

页面应用

src/pages/demo/index.vue

<template>
  <div>
    TEST
  </div>
</template>

<script>
import testAPI from '@/api/test/testAPI.js'
export default {
  components: {},
  data () {
    return {
    }
  },
  created () {},
  mounted () {
    this.test()
  },
  methods: {
    test: function () {
      testAPI.testAPI({}).then(function (response) {
        console.log(response)
      })
    }
  }
}
</script>

<style scoped>

</style>

以上.