mpvue使用axios发送请求

最新推荐文章于 2020-12-07 16:16:59 发布

want、

最新推荐文章于 2020-12-07 16:16:59 发布

阅读量328

点赞数

分类专栏：小程序 mpvue

本文链接：https://blog.youkuaiyun.com/javaScript_want/article/details/105571404

版权

小程序同时被 2 个专栏收录

3 篇文章

订阅专栏

mpvue

1 篇文章

订阅专栏

本文介绍了一种在微信小程序中使用axios进行网络请求的方法，通过重写axios的请求方式，使其适应小程序的API，包括get和post请求，并将请求方法挂载到Vue原型上，方便在Vue组件中调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

重写axios的请求方式

/**
 * 小程序的请求方式
 * @param url 
 * @param type
 * @param data
 * @returns {Promise}
 */
const Http = (config) => {
    let local = wx.getStorageSync('at_token') 
    // 开启菊花图
    wx.showLoading({
        title: '加载中',
    })
    return new Promise((resolve, reject) => {
        let data = config.method == 'get' ? config.params : config.data
        wx.request({
            url: axios.defaults.baseURL + config.url,
            method: config.method,
            data: data,
            header: {
                'token': local
            },
            success: (res) => {
                resolve(res)
            },
            fail: (err) => {
                reject(err)
            },
            complete: (res) => {
                wx.hideLoading()
            }
        })
    })
}

//重写axios的请求方式  小程序不支持xmlHttp请求方式
axios.defaults.adapter = Http;


// 请求挂载到vue上 get请求
Vue.prototype.$HttpGet = (url, params) =>
    axios({
        method: 'get',
        url: url,
        params: params
    })


// 请求挂载到vue上 post请求
Vue.prototype.$HttpPost = (url, data = {}) =>
    axios({
        method: 'post',
        url: url,
        data: data
    })