vue3封装axios+Promise及代理配置

axios安装

npm install axios

在这里插入图片描述

新建一个util文件夹,用于存放工具类

新建http.js,用于封装axios请求

其中实际开发中,baseURL是设置一个值以便代理的实现,但是需要根据开发/生产环境进行动态配置,防止生产环境打包后斜体样式,访问链接依然带上baseUrl

import axios from 'axios'

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

httpUtil.ajax = (options) => {
  return new Promise((resolve, reject) => {
    httpUtil({
      url: options.url,
      method: options.method,
      data: options.data ? options.data : null,
      params: options.params ? options.params : null
    }).then(res =
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以参考以下步骤: 1. 首先安装 axios 和 qs(如果需要) 2. 在 main.js 中引入 axios 并进行二次封装: ``` import axios from 'axios' import qs from 'qs' axios.defaults.baseURL = 'http://api.xxx.com' // 设置接口基地址 axios.defaults.timeout = 10000 // 设置超时时间 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8' // 设置默认请求头 axios.interceptors.request.use(config => { // 在请求发送之前做一些处理 config.headers.token = localStorage.getItem('token') || '' return config }, error => { // 出错处理 return Promise.reject(error) }) axios.interceptors.response.use(response => { // 在响应成功处理之前做一些处理 return response }, error => { // 响应错误处理 return Promise.reject(error) }) function get (url, params) { return new Promise((resolve, reject) => { axios.get(url, { params }).then(res => { resolve(res.data) }).catch(err => { reject(err.data) }) }) } function post (url, data) { return new Promise((resolve, reject) => { axios.post(url, qs.stringify(data)).then(res => { resolve(res.data) }).catch(err => { reject(err.data) }) }) } export default { get, post } ``` 3. 在组件中使用二次封装后的 axios: ``` import request from '@/utils/request' methods: { getData () { request.get('/api/getData', { id: '123456' }).then(res => { console.log(res) }).catch(err => { console.log(err) }) } } ``` 以上是对于vue3 + vant + ts 配置axios的二次封装的一种实现,仅供参考。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值