Vue从零开始之axios

Axios网络请求

jQuer有1w+行代码,vue的代码也才1w+行.我们只为进行网络请求就引入jQuery得不偿失.

安装Axios

• npm安装

npm install axios --save --registry=https://registry.npm.taobao.org

• main.js中引用Axios

import axios from 'axios'
/*使用原型链,为Vue实例添加axios对象*/
Vue.prototype.axios = axios;
// 或直接使用导入的 axios 实例

axiox请求方式

• axios(config)
• 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]])

get请求简单使用

进行异步请求,要在组件内路由钩子的beforeRouteEnter中发送异步请求

  export default {
    props: ['id'],
    name: "UserProfile",
    beforeRouteEnter: (to, from, next) => {
      console.log("准备进入个人信息页");
      // 注意，一定要在 next 中请求，因为该方法调用时 Vue 实例还没有创建，此时无法获取到 this 对象，
     //在这里使用官方提供的回调函数拿到当前实例,再调用方法
      next(vm => {
        vm.getData();
      });
    },
    methods: {
      getData: function () {
        this.axios({
          method: 'get',