欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue与后台通讯ajax下载和简单使用

程序员文章站 2023-12-31 22:41:22
vue-resource下载npm install vue-resource --savevue-resource使用初始化在main.js中使用案例mounted () { // 发ajax请求 const url = `https://api.github.com/search/repositories?q=v&sort=stars` this.$http.get(url).then( response => {...

vue-resource下载

npm install vue-resource --save

vue-resource使用初始化在main.js中
vue与后台通讯ajax下载和简单使用
使用案例

mounted () {
      // 发ajax请求
      const url = `https://api.github.com/search/repositories?q=v&sort=stars`
      this.$http.get(url).then(
        response => {
          const result = response.data
          // 得到第一个
          const mostRepo = result.items[0]
          this.repoUrl = mostRepo.html_url
          this.repoName = mostRepo.name
        },
        response => {
          alert('请求失败')
        }
      )
    }

axios下载

npm install axios --save

不需要像vue-resource初始化,因为vue-resource是插件,而axios不是
使用案例1

const url = `https://api.github.com/search/repositories?q=v&sort=stars`
      axios.get(url).then(
        response => {
          const result = response.data
          // 得到第一个
          const mostRepo = result.items[0]
          this.repoUrl = mostRepo.html_url
          this.repoName = mostRepo.name
        },
        response => {
          alert('请求失败')
        }
      )

使用案例2

const url = `https://api.github.com/search/repositories?q=v&sort=stars`
      axios.get(url).then(
        response => {
          const result = response.data
          // 得到第一个
          const mostRepo = result.items[0]
          this.repoUrl = mostRepo.html_url
          this.repoName = mostRepo.name
          // eslint-disable-next-line handle-callback-err
        }).catch(error => {
          alert('请求失败')
      })

本文地址:https://blog.csdn.net/weixin_44575660/article/details/107950699

相关标签: vue

上一篇:

下一篇: