vue axios

参考网址地

https://www.runoob.com/vue2/vuejs-ajax-axios.html

https://www.jianshu.com/p/7a9fbcbb1114

https://www.kancloud.cn/yunye/axios/

axios 发送ajax请求

一、下载

npm install axios --save

二、配置
在main.js中配置

main.js

import axios from 'axios'

Vue.prototype.$axios = axios;

 三、使用

1、get请求

应用场景：初始化路由，获取数据，一般与生命周期的mounted一起使用

格式：

注意：this在then中function的变化

this.$axios.request({
  method: '',
  url: ''
}).then(function (arg) {
  console.log(arg)
}).catch(function (arg) {
  console.log(arg)
})

例子:

export default {
    name: "Course",
    data(){
      return {
        msg: "课程",
        courseList:[
        ]
      }
    },
    methods: {
      initCourse() {
        var that = this;
        // get请求
        this.$axios.get('http://127.0.0.1:8000/api/v1/course/')
          .then(function (response) {
            // console.log(response.data);
            if (response.data.code === 1000){
              that.courseList = response.data.data;
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    },
      mounted() {
        this.initCourse();
      }
}

或使用下面的方式（推荐）

this.$axios.request({
  url:http://127.0.0.1:8000/api/v1/course/',
  method:'GET'
}).then(function (arg) {
  if(arg.data.code === 1000){
    that.detail = arg.data.data
  }else{
    alert(arg.data.error)
  }
}).catch(function (ret) {
    // ajax请求失败之后，获取响应的内容
})

GET请求的url，含有参数

// 直接在 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);
  });

或

var that = this
this.$axios.request({
  url:/user,
  method:'GET',
  params:{
    token:1234
  }
}).then(function (arg) {
     console.log(arg)
  }.catch(function (error) {
    console.log(error);
  });
})

3、post请求

应用场景：向后端提交数据(前后的数据交互用json)

格式：

this.$axios.request({
  method: 'POST',
  url: '',
  // 提交的数据
  data: {
    username: this.username,
    password: this.password
  },
  // 自定义请求头的格式
  headers: {
    'Content-Type': 'application/json'
  }
}).then(function (arg) {
  console.log(arg)
}).catch(function (arg) {
  console.log(arg)
})