Vue.js actually uses Vuex + AXIOS to send request details

Vue originally has an officially recommended Ajax plug-in Vue-Resource, but since Vue updated to 2.0, the official no longer updated Vue-Resource

Currently mainstream Vue projects, all chooses AXIOS to complete AJAX requests, and large projects use Vuex to manage data, so this blog will be combined to send request

Vuex installation will not be described again, You can refer to Vue.js Battle Vuex’s Getting Started Tutorial

When installing other plug-ins, it can be introduced directly in main.js, but AXIOS does not use USE, only each component that needs to be sent. Immediately introduce

In order to solve this problem, there are two development ideas. First, after introducing AXIOS, modify the original chain, the second is to combine VUEX, package an Aciton. Specific implementation, please see ~

Scheme 1: Rewriting the prototype chain

First introduced AXIOS

This occasionally cannot be used in other components. However, if the AXIOS is rewritten as the prototype attribute of Vue, it can solve this problem

Vue.Prototype. $ Ajax = AXIOS
in MAfter ain.js added two lines of code, can be directly used in the assembly methods Ajax command $

methods:. {SubmitForm () {this $ ajax ({method: ‘post’, url: ‘/ user’, data: {name: ‘wise’, info: ‘wrong’}})}
Option two: Vuex encapsulated in the

before articles used before Vuex of mutations, from a results point of view, mutations similar events for submitting state Vuex in the state

Action and mutations is also very similar, the main difference is that, action may comprise an asynchronous operation, and may be submitted by mutations Action

there is also an important difference:

mutations have an inherent parameter state, receiving a state subject Vuex the

action also has an internal parameter context, but the context is the state of the parent, comprising state, getters

Vuex warehouse is store.js, the axios introduced, and add a new method of

in action

// store.jsimport Vue from ‘Vue’import Vuex from’ vuex ‘/ / introduction axiosimport axios from ‘axios’Vue.use (Vuex) const store = nEW Vuex.Store ({// Defined Status State: {TEST01: {Name: ‘Wise Wrong’}, TEST02: {Tell: ‘12312345678’}}, Ajax Method Saveform (Context) {AXIOS ({Method: ‘POST’, URL: ‘/ user’, data: context.state.teest02}}}}) Export Default Store
Note : Even if AXIOS has been introduced in main.js, and rewritten the prototype chain, the $ Ajax command

cannot be used directly in Store.js, which is independent of each other

Methods: {SubmitForm () {this. $ Store. $ 43. Dispatch (‘Saveform’)}}

SubmitForm is a method binding on the component, which will trigger SaveForm to send requests to the server through AXIOS
  Attachment: Configuring AXIOS  
In the above package, the three configuration items of the AXIOS are used, and only the URL is necessary.
For convenience, AXIOS also has an alias for each method, such as the above Saveform method 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, it will execute .Then, otherwise execution .catch


The above is the full content of this article, I hope this paper For everyone’s learning or work, you can bring a certain help. If you have any questions, you can leave a message, thank you for your support of Tumi Cloud.
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment