【前端学习】Vue2.x搭配Axios执行ajax请求

在Vue1.x中，官方推荐使用的ajxa库是vue-resource。到了Vue2.x，官方（尤大）推荐的ajax库改为了Axios，按照说法是因为已有一个更完备的轮子，就不需要造一个新的。

使用Axios，可以通过npm或者直接引入js的方式进行。

npm install axios

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

【注意】使用npm方式构建的话，要留意一点，vue-resource的使用方式通常是

import VueResource from 'vue-resource'

Vue.use(VueResource);

在Axios里，由于其只是一个第三方库，因此无法直接使用Vue.use(...)，必须在使用到的地方进行import。

import Axios from ('axios')

Axios.get('...');

当然，也有一种办法，就是修改原型链

Vue.prototype.$ajax = axios;

但是修改原型链的办法也有一个缺陷，如果搭配Vuex使用时，在main.js中修改的原型链无法传达至store/index.js中。

因此最好还是老老实实用引入。

同样地，在vue-resource中支持回调方法中直接调用this返回vue对象本身

  export default {
    data() {
      return {
        users: []
      }
    },
    methods: {
      find() {
        this.$http.get('/users',
          function (response) {
            this.users = response.body
          })
      }
    }
  }

在Axios中，直接使用this返回的是回调方法本身，需要使用以下2种办法来处理

1、使用bind(this)

  this.$http.get('/users')
    .then(function (response) {
        console.log(this);
    }.bind(this))
    .catch(function (error) {
        console.log(this);
    })

2、【推荐】使用es6的箭头函数

  this.$http.get('/users')
    .then(response => {
      console.log(this);
    })
    .catch(error => {
      console.log(this);
    });

Axios的一些api：

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 这些属性都不必在配置中指定。

处理并发请求的助手函数

axios.all(iterable)

axios.spread(callback)

function getStudent() {
  return axios.get('/users');
}

function getTeacher() {
  return axios.get('/teachers');
}

Axios.all([getStudent(), getTeacher()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求都执行完成
  }));

【前端学习】Vue2.x搭配Axios执行ajax请求

猜你喜欢