pc和uniapp,封装axios以及增删改查请求

本文档展示了如何在PC端和uniapp环境下封装axios,包括设置基础URL、超时时间、请求和响应拦截器,以及处理错误情况。在PC端,当返回码为504时,会清除token并跳转到登录页面。uniapp中,对axios进行了适配,并提供了get、post等常用HTTP方法的封装。

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

//request.js
//PC端封装axios

import axios from 'axios'
import {ElMessageBox} from 'element-plus'
import urlJson from './../../public/config.json'
import router from '../router'

axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? urlJson.productUrl : urlJson.baseUrl;

axios.defaults.timeout = 20000; // 超时时间
axios.defaults.retry = 1;// 请求失败重试次数,共请求2次
axios.defaults.retryDelay = 1000;// 请求的间隙

// 添加请求拦截器
axios.interceptors.request.use((config) => {
        config.headers.common['AccessToken'] = sessionStorage.getItem('token')
        return config;
    },
    (error) => {
        return Promise.reject(error);
    }
);

let tokenInvalidFlag = 0;//token无效标志
// 添加响应拦截器
axios.interceptors.response.use(response => {
    switch (response.data.code) {
        case 200:
            tokenInvalidFlag = 0;
            break
        default:
    }
    return response
}, err => {
    //console.log(err.response)
    //避免登录失败还报504错
    if(err.response==undefined){
        return
    }
    if (err.response.config.url != '/getRouters') {
        switch (err.response.data.code) {
            // 504 token 过期
            case 504:
                if (tokenInvalidFlag === 0) {
                    tokenInvalidFlag = 1
                    sessionStorage.removeItem('token');
                    sessionStorage.removeItem('username');
                    ElMessageBox.alert(err.response.data.msg, '提示', {
                        confirmButtonText: '确定',
                        callback: action => {
                            router.replace({
                                path: '/login',
                                query: {
                                    redirect: router.currentRoute.value.fullPath
                                }
                            });
                        }
                    });
                }

                break
        }
    }

    return Promise.reject(err)
})

export {axios}

 

//request.js
//uniapp 封装axios

import axios from 'axios'

axios.defaults.baseURL = 'http://127.0.0.1:8888'
axios.defaults.timeout = 30000; // 超时时间

// request拦截器,在请求之前做一些处理
axios.interceptors.request.use(
	config => {
		config.headers.common['Authorization'] =uni.getStorageSync('token')
		return config;
	},
	error => {
		console.log(error); // for debug
		return Promise.reject(error);
	}
);

//配置成功后的拦截器
axios.interceptors.response.use(res => {
	return res
}, error => {
	return Promise.reject(error)
})

//uniapp适配axios,否则会报错:adapter is not a function
axios.defaults.adapter = function(config) {
  return new Promise((resolve, reject) => {
      //console.log(config)
      var settle = require('axios/lib/core/settle');
      var buildURL = require('axios/lib/helpers/buildURL');
      uni.request({
          method: config.method.toUpperCase(),
          url: config.baseURL + buildURL(config.url, config.params, config.paramsSerializer),
          header: config.headers,
          data: config.data,
          dataType: config.dataType,
          responseType: config.responseType,
          sslVerify: config.sslVerify,
          complete: function complete(response) {
              response = {
                  data: response.data,
                  status: response.statusCode,
                  errMsg: response.errMsg,
                  header: response.header,
                  config: config
              };

              settle(resolve, reject, response);
          }
      })
  })
}


export {
	axios
}
//http.js,uniapp同

import {axios} from './request'

// get 请求
const get = function (url, params) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
            params: params
        }).then(res => {
            resolve(res)
        }).catch(err => {
            reject(err)
        })
    })
}

// get-拼接参数的方式 ?param=''?
// {id:'123',te:'y'}
const getJoin = function (url, params) {
    let paramStr = url + '?'
    for (const k in params) {
        paramStr = paramStr + k + ':' + params[k] + '&'
    }
    paramStr = paramStr.replace(/:/g, '=')
    const paramArr = paramStr.split('')
    if (paramArr[paramArr.length - 1] === '&') {
        paramArr.pop()
    }
    const newParam = paramArr.join('')
    return new Promise((resolve, reject) => {
        axios.get(newParam)
            .then(res => {
                resolve(res)
            }).catch(err => {
            reject(err)
        })
    })
}

// POST 请求
const post = function (url, data) {
    //console.log(data, '测试http')
    return new Promise((resolve, reject) => {
        axios.post(url, data).then(res => {
            resolve(res)
        }).catch(err => {
            reject(err)
        })
    })
}

// PUT 请求
const put = function (url, data) {
    return new Promise((resolve, reject) => {
        axios.put(url, data).then(res => {
            resolve(res)
        }).catch(err => {
            reject(err)
        })
    })
}

// DELETE 请求
const del = function (url, data) {
    return new Promise((resolve, reject) => {
        axios.delete(url, data).then(res => {
            resolve(res)
        }).catch(err => {
            reject(err)
        })
    })
}

//下载文件
const getFile = function (url,data) {
    return new Promise((resolve, reject) => {
        axios({
            url: url,
            responseType: "blob",
            method: 'get',
            params: data
        }).then(res => {
            resolve(res)
        }).catch(err => {
            reject(err)
        })
    })
}

//上传文件
const postUpload = function (url, data, params) {
    return new Promise((resolve, reject) => {
        axios({
            url: url,
            method: 'POST',
            headers: {
                'Content-type': 'multipart/form-data;boundary=${new Date().getTime()}',
            },
            data: data,
            params: params
        }).then(res => {
            resolve(res)
        }).catch(err => {
            reject(err)
        })
    })
}

export default {get, post, put, del, getJoin, getFile, postUpload}

uniapp封装axios请求可以通过以下步骤进行: 第一步:安装依赖 你可以使用axios-miniprogram-adapter这个依赖来适配小程序网络请求的适配器。这样可以避免uniapp在使用axios请求时报"adapter is not a function"错误。你可以通过以下命令安装依赖: ``` npm i axios@0.26.0 axios-miniprogram-adapter ``` 或者 ``` yarn add axios@0.26.0 axios-miniprogram-adapter ``` 第二步:axios二次封装uniapp中,你可以对axios进行二次封装,以便更好地适配uniapp请求需求。你可以参考以下代码示例: ```javascript // 引入axios适配器 import axios from 'axios' import adapter from 'axios-miniprogram-adapter' // 创建axios实例 const instance = axios.create({ adapter }) // 设置基本URL instance.defaults.baseURL = 'your_base_url' // 封装请求函数 function request(options) { return new Promise((resolve, reject) => { instance(options) .then(response => { resolve(response.data) }) .catch(error => { reject(error) }) }) } // 导出请求函数 export default request ``` 这样,你就可以在uniapp中使用封装好的axios请求了。例如: ```javascript import request from 'your_request_file_path' // 发起请求 request({ url: '/api/example', method: 'GET', data: { // 请求参数 } }) .then(response => { // 处理响应数据 }) .catch(error => { // 处理错误 }) ``` 通过以上步骤,你可以在uniapp封装axios请求,并且使用适配器来解决小程序网络请求的问题。希望对你有帮助! #### 引用[.reference_title] - *1* *2* [uniapp 微信小程序axios库的封装及使用](https://blog.csdn.net/weixin_43743175/article/details/129704892)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [uniapp封装axios?大可不必那么麻烦。](https://blog.csdn.net/m0_56344602/article/details/125390024)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值