永逺亭
2021-09-09 15:28
采纳率: 66.7%
浏览 88
已结题

使用axios发起get请求出现的状况

学习别人的视频中,发起get请求,

img

img

img


上图中注释的就是自己发起的源生get请求,运行后,控制台并无报错,但是Network也没有任何网络传输,
如果使用图中未被注释的方法,可以获取到接口返回的数据,这到底是为什么?


更新一下完整代码
html就简单描述一下,有个 按钮,点击事件是onSendSms,目的是获取手机验证码

async onSendSms () {
      // 1.校验手机号
      try {
        await this.$refs.loginFormRef.validate('mobile')
        console.log('验证通过')
      } catch (err) {
        return console.log('验证失败', err)
      }
      // 2.验证通过,显示倒计时
      this.iscountShow = true
      // 3.请求发送验证码
      try {
        // const { data: res } = await sendSms(this.user.mobile)
        const res = await sendSms(this.user.mobile)
        // const res = await this.axios.get(`http://ttapi.research.itcast.cn/app/v1_0/sms/codes/${this.user.mobile}`)
        this.$toast('发送成功')
        console.log('发送成功', res)
      } catch (err) {
        this.iscountShow = false
        if (err.response.status === 429) {
          return this.$toast('发送太频繁,请稍后重试')
        } else {
          console.log('发送失败', err)
        }
      }
    }

这是封装的初始请求模块

/**
 * 请求模块
 */
import axios from 'axios'

const request = axios.create({
  baseURL: 'http://ttapi.research.itcast.cn/' // 接口的基准路径
})

这是第二次封装请求模块

export const sendSms = mobile => {
  return request({
    method: 'GET',
    url: `/app/v1_0/sms/codes/${mobile}`
  })
}

我调用的源生的axios请求,应该是直接跳过这些封装的,和这些封装没什么关系

  • 好问题 提建议
  • 收藏

2条回答 默认 最新

  • Lazy33 2021-09-09 16:03
    已采纳

    你的axios二次封装的不对劲

    封装之后应该是你返回 出去一个promise对象的。
    至于为什么你注释的那个 this.axios 是个什么东西?你也没发
    目前看的话,没有网络传输,没有报错。那就是根本就没有调用吧??

    不太清楚 网络请求这个,有时候放一页代码都找不到问题 何况你还没发全。

    已采纳该答案
    评论
    解决 1 无用
    打赏 举报
  • 永逺亭 2021-09-09 16:55

    找到问题了,直接在当前页面导入axios 去掉this,是能够发出请求的,可能是没有全局导入axios,这个this不知道指到什么地方去了,如果使用app.config.globalProperties.$http = axios 全局导入,将不会出现这个问题,谢谢各位

    评论
    解决 1 无用
    打赏 举报

相关推荐 更多相似问题