vuejs+axios send request

Vue originally had an officially recommended ajax plugin  vue-resource , but since Vue was updated to 2.0, the official no longer updated vue-resource

At present, mainstream Vue projects choose  axios  to complete ajax requests, and large projects will use Vuex to manage data, so this blog will combine the two to send requests

 

Foreword: 

 

Install axios using cnpm

cnpm install axios -S

When installing other plugins, you can directly import and Vue.use() in main.js, but axios cannot be used, and can only be introduced immediately in each component that needs to send a request

In order to solve this problem, there are two development ideas, one is to modify the prototype chain after the introduction of axios, and the other is to combine Vuex to encapsulate an aciton. Please see below for the specific implementation~

 

Option 1: Rewrite the prototype chain

First introduce axios in main.js

import axios from 'axios'

At this time, if you are in other components, you cannot use the axios command. But if you rewrite axios as Vue's prototype property, you can solve this problem

Vue.prototype. $ Ajax = axios

After adding these two lines of code in main.js, you can use the $ajax command directly in the methods of the component

methods: {
  submitForm () {
    this.$ajax({
      method: 'post',
      url: '/user',
      data: {
        name: 'wise',
        info: 'wrong'
      }
   })
}

 

 

Option 2: Package in Vuex

Vuex's mutations have been used in previous articles. From the results, mutations are similar to events, which are used to submit the state in Vuex

Actions and mutations are also very similar, the main difference is that actions can contain asynchronous operations, and mutations can be submitted through actions

There is another important difference:

Mutations have an inherent parameter state, which receives the state object in Vuex

action also has an inherent parameter context, but  context is the parent of state, including state, getters

 

The warehouse of Vuex is store.js, which introduces axios and adds new methods to action

// store.js 
import View from 'View'
import Vuex from 'vuex'

// import axios
import axios from 'axios'

Vue.use(Vuex)

const store = new Vuex.Store({
  // define state
  state: {
    test01: {
      name: 'Wise Wrong'
    },
    test02: {
      tell: '12312345678'
    }
  },
  actions: {
    // encapsulate an ajax method
    saveForm (context) {
      axios({
        method: 'post',
        url: '/user',
        data: context.state.test02
      })
    }
  }
})

export default store
    

Note: Even if you have introduced axios in main.js and rewritten the prototype chain, you cannot use the $ajax command directly in store.js

In other words, the two options are independent of each other

 

When sending a request in a component, you need to use  this.$store.dispatch  to distribute

methods: {
  submitForm () {
    this.$store.dispatch('saveForm')
  }
}

submitForm is a method bound to the component that will trigger saveForm to send a request to the server through axios

 

 

Appendix: Configuring axios 

In the method encapsulated above, the three configuration items of axios are used. In fact, only the url is necessary. For the complete api, please refer to the instructions for use.

For convenience, axios also aliases each method. For example, the saveForm method above is equivalent to:

axios.post('/user', context.state.test02)

The complete request should also include .then and .catch

.then(function(res){
  console.log(res)
})
.catch(function(err){
  console.log(err)
})

When the request is successful, .then will be executed, otherwise .catch will be executed

These two callback functions have their own independent scopes. If you access this directly in it, you cannot access the Vue instance.

At this time, just add a .bind(this) to solve this problem

.then(function(res){
  console.log(this.data)
}.bind(this))