axios的使用

一,axios介绍

axios即在Vue中的ajax

基于Promise的HTTP请求客户端,可以同时在浏览器和node.js使用。

使用npm安装axios

  -- npm install axios -D

基本的使用

<template>
    <div>
      <h1>免费课程</h1>
      {{msg}}
    </div>
</template>

<script>
    export default {
      name: "Course",
      data(){
          return {
            msg: ""
          }
      },
      mounted(){
        let _this = this;  // 这个坑要注意,发送ajax是要注意
        this.$axios.request({
          url:"http://127.0.0.1:8000/test/",
          method: "get"
        }).then(function (data) {  // 成功后的回调函数
          console.log(data);  // {data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}
          _this.msg = data.data
        }).catch(function (data) {  // 失败后的回调函数
          console.log(data)
        })
      }
    }
</script>

<style scoped>

</style>

其他写法

test(){
          this.$axios.get(url,{
            params: {
              id: 123,
            }
          }).then(function (response) {
            // 请求成功回调函数
          }).catch(function (response) {
            // 请求失败的回调函数
          })
}
get请求
test(){
          this.$axios.post(url,{
              course_title: "Python",
              course_price: "19.88"
          }).then(function (response) {
            // 请求成功回调函数
          }).catch(function (response) {
            // 请求失败的回调函数
          })
}

post请求
post请求
function getCourse(){
          return this.$axios.get('/course/12')
        }
function getCourse_all() {
          return this.$axios.get('/course')
        }
this.$axios.all([getCourse_all(),getCourse()])
          .then().catch()
发送多个并发请求

 更多语法:https://ykloveyxk.github.io/2017/02/25/axios%E5%85%A8%E6%94%BB%E7%95%A5/

 

posted @ 2018-09-13 21:17  Mr.GLH  阅读(228)  评论(0)    收藏  举报
Top↑