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

【Vue】Vue通过axios实现Ajax请求

程序员文章站 2022-07-03 12:50:18
【Vue】Vue通过axios实现Ajax请求1. Vue与Ajax2. 安装Axios2. get请求3. post请求4. 执行多个并发请求5. 请求方法的别名1. Vue与Ajaxvue本身是不支持发送ajax请求,需要通过其他库来实现的(比如vue1.0版本官方推荐的vue-resource、vue2.0版本官方推荐的axios),或者也可以使用jquery来发送ajax请求。vue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP进行Web请求和处理响应...

1. Vue与Ajax

vue本身是不支持发送ajax请求,需要通过其他库来实现的(比如vue1.0版本官方推荐的vue-resource、vue2.0版本官方推荐的axios),或者也可以使用jquery来发送ajax请求。

vue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP进行Web请求和处理响应的服务。 当vue更新
到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,在这里大家了解一下vue-resource就可以。
vue-resource的github: https://github.com/pagekit/vue-resource

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中
axios的github:https://github.com/axios/axios

2. 安装Axios

  • 使用 cdn:

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    

    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    
  • 使用 npm:

npm install axios
  • 直接导入js文件

2. get请求

我们可以简单的读取 JSON 数据:

new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('url')
      .then(response => (this.info = response))
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
  }
})

使用 response.data 读取 JSON 数据:

new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('url')
      .then(response => (this.info = response.data.sites))
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
  }
})

GET 方法传递参数格式如下:

// 直接在 URL 上添加参数 ID=12345
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
 
// 也可以通过 params 设置参数:
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

3. post请求

new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .post('url')
      .then(response => (this.info = response))
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
  }
})

POST 方法传递参数格式如下:

axios.post('/user', {
    firstName: 'Fred',        // 参数 firstName
    lastName: 'Flintstone'    // 参数 lastName
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

4. 执行多个并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}
 
function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));

5. 请求方法的别名

为方便使用,官方为所有支持的请求方法提供了别名,可以直接使用别名来发起请求:

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

注意:在使用别名方法时, url、method、data 这些属性都不必在配置中指定。

本文地址:https://blog.csdn.net/qq_41879343/article/details/107469508