Vue implements loading effects and axios installation configuration based on vuex and axios

The content of this article is about Vue’s loading effect based on vuex and axios interceptor and the installation configuration of axios. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. .

Preparation

• Use vue-cli scaffolding to create a project

• Enter the project to install vuex and axios (npm install vuex,npm install axios)

axios configuration

Install in the project After the axios module (npm install axios) is completed, perform the following configuration:

main.js

//引入axios
import Axios from 'axios'

//修改原型链，全局使用axios,这样之后可在每个组件的methods中调用$axios命令完成数据请求
Vue.prototype.$axios=Axios

loading component

I choose to use the loading component provided by iview here.

npm install iview

main.js
import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(iView);

After installation and introduction, write loading as a component loading.vue

Vuex state setting controls the visibility of loading

##store.js(Vuex)

export const store = new Vuex.Store({
    state:{
        isShow:false
    }
})

Define the isShow attribute in the state, the default is false to hide

v-if="this.$store.state.isShow"

Add v-if to the loading component to bind isShow in the state

The component uses axios to request data

<button>请求数据</button>

methods:{
        getData(){
            this.$axios.get('https://www.apiopen.top/journalismApi')
            .then(res=>{
                console.log(res)//返回请求的结果
            })
            .catch(err=>{
                console.log(err)
            })
        }
    }

I use a button to trigger the event, use get to request an api interface found on the Internet, and return the entire result of the request (not just data) in .then.

Axios interceptor configuration

main.js

//定义一个请求拦截器
Axios.interceptors.request.use(function(config){
  store.state.isShow=true; //在请求发出之前进行一些操作
  return config
})
//定义一个响应拦截器
Axios.interceptors.response.use(function(config){
  store.state.isShow=false;//在这里对返回的数据进行处理
  return config
})

Define a request interceptor respectively (request start Perform certain operations when executing), response interceptor (perform certain operations after receiving data), respectively set the operations to be performed when intercepting, change the Boolean value of isShow in the state to control the loading component to display loading when the request data starts to be triggered. , hide loading when returning data

Special attention: There is a syntax pit here (I stepped on it many times). The data in main.js that is called and manipulated in vuex state is different from this.$store.state in the component, but directly store.state Same as the above code

Effect display

Related recommendations:

Vue configuration axios method step example

Implement animation switching function based on Vue, Vuex, and Vue-router

The above is the detailed content of Vue implements loading effects and axios installation configuration based on vuex and axios. For more information, please follow other related articles on the PHP Chinese website!