taro从o开始开发微信小程序（封装axios请求）

最新推荐文章于 2024-07-10 03:09:16 发布

小羊卷

最新推荐文章于 2024-07-10 03:09:16 发布

阅读量625

点赞数 1

文章标签： taro 微信小程序小程序

本文链接：https://blog.csdn.net/LOxia/article/details/134573556

版权

引用记Taro开发小程序与发布过程 - 掘金

一点一滴学习，离不开前人提供经验

转载只是为了不管在哪个平台都方便看到

导入包：taro-axios

pnpm i taro-axios --save

import { axios } from 'taro-axios'
import Taro from '@tarojs/taro'

// 公共提示
const shwoErrorToast = (msg: any) => {
    Taro.showToast({
        title: msg,
        icon: 'none'
    })
}

// 请求根路径
const instance = axios.create({
  baseURL: process.env.BASE_URL,
})

// 请求拦截器
instance.interceptors.request.use(
    (config) => {
        Taro.showLoading({
            title: '加载中',
            mask:true //使用蒙层
        })
        let token = Taro.getStorageSync('token')
        if (typeof token == undefined) {
            token = '';
        }
        config.headers = {
            'Content-Type': 'application/json;charset=utf-8',
            Authorization:token,
        }
        return config;
    }, (error) => {
        return Promise.reject(error)
    }
)

// 响应拦截器
instance.interceptors.response.use(
    (response: any) => {
        Taro.hideLoading()
        if (response.data.isError) {
            shwoErrorToast(response.data.error.message)
        } else {
            return response;
        }
    }, (error) => {
        if (error.response) {
            Taro.hideLoading()
            console.log('err', error)
            
            let res = error.response.data
            switch (res.code) {
                case 400:
                    shwoErrorToast(res.message || '非法请求')
                    break
                case 401:
                    shwoErrorToast('登录过期')// 可以尝试无感登陆或者跳转到登陆页
                    break
                case 403:
                    shwoErrorToast(res.message || '非法请求')
                    break
                case 404:
                    shwoErrorToast(res.message || '非法请求')
                    break
                case 500:
                case 502:
                    shwoErrorToast(res.message || '服务器开小差啦')
                    break
                default:
                    shwoErrorToast(res.message || res.statusText)
            }
        } else {
            console.log(error)
            shwoErrorToast('请检查网络连接状态')
        }
        return Promise.reject(error)
    }
)

export default instance

以上便是封装全部内容，稍后会测验，如果测验出现问题，会随时在后面补充