场景

uniapp自带的uni.request不太好用,也有可能是自己用axios用的太熟悉了,所以还是用axios趁手点,所以尝试在uniapp中使用axios。

操作

因为uniapp项目没有package.json,所以先在项目根目录下执行 npm init,

执行完毕后直接 npm install axios, 这时候axios就被添加进来。

此时其实就可以直接使用了如下:

我给axios封装成了一个工具类:

在这里插入图片描述

import axios from 'axios'

const fetch = axios.create({
    baseURL: '/api',
    timeout: 30000
})

const cancelLoading = (config) => {

}


fetch.interceptors.request.use(req => {
    return req
}, (error) => {
    return Promise.reject(error)
})


fetch.interceptors.response.use(
    config => {
        try {
            const code = config.data.code
            // 成功处理
            if (code != 0) {

                return Promise.reject(config)
            } else {
                return config.data
            }
        } finally {
            cancelLoading(config)
        }
    },
    (error) => {
        try {
            // 失败处理
            if (error?.response?.status == 401) {

            }
            return Promise.reject(error)
        } finally {
            cancelLoading(error)
        }
    }
)


export default fetch


之后在uniapp的.vue文件中直接使用即可:

.....
import fetch from '@/utils/fetch.js'
...
fetch.post('/xxx/xxx', this.data).then(res => {
uni.showToast({
			title: `操作成功`
		})
	})
Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐