当前位置: 移动技术网 > IT编程>开发语言>JavaScript > vue与后台通讯ajax下载和简单使用

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

2020年08月14日  | 移动技术网IT编程  | 我要评论
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中
在这里插入图片描述
使用案例

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

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网