1, Packaging of axios

In the vue project, we usually use the axios library to interact with the background to obtain data. It is an http Library Based on promise, which can run on the browser and node JS. It has many excellent features, such as intercepting requests and responses, canceling requests, transforming json, client defense XSRF, etc.

If we want to use many interfaces in a project, we can't fill every page get() or post()? So we have to manually package a global Axios network module, which is convenient and less redundant.

Step 1: installation

npm install axios //This is the command to install axios
 Installation is a must

Step 2: create a file

After installation, create two new directories in the src file of the project, one is http and the other is api. The http directory is used to encapsulate Axios, and the api directory is used to uniformly manage our interfaces.

The third step is to introduce

At http The installed axios is introduced into JS

import axios from 'axios'

Step 4: environment switching

//Test development in development environment
if(process.env.NODE_ENV == 'development') {
axios.defaults.baseURL = 'http://120.53.31.103:84/'
}
//Testing production in a production environment
if(process.env.NODE_ENV == 'production') {
axios.defaults.baseURL = 'https://wap.365msmk.com/'
}
//There is also an environment for debug ging

Step 5: set the response timeout

Via Axios defaults. Timeout sets the default request timeout. If the response time is exceeded, the user will be informed that the current request times out, please refresh, etc

//Response timeout time
axios.defaults.timeout = 5000;

Step 6: set the interface request interception

//Interface request interception
axios.interceptors.request.use(
config => {
config.headers = { DeviceType : 'H5' } //Set response header
return config
}
)

Step 7: use promise to return the result of axios request

post mode:

export function get(url,params){
return new Promise((resolve,reject) => {
axios.get(url,{
params : params
}).then(res => {
resolve(res)
}).catch(err => {
reject(err)
})
})
}

get method:

export function post(url,params){
return new Promise((resolve,reject) => {
axios.post(url,params)
.then(res => {
resolve(res.data)
})
.catch(err => {
reject(err.data)
})
})
}

At this time, http JS inside the written. Next we will go to api JS to get the api interface.

Now it's API JS

The first step is to create an API JS to introduce just encapsulated axios

import {get,post} from '.../http/http.js'
//get post should be introduced at the same time

The second step is to obtain the data according to the interface document

//Method of encapsulating interface
export function getAppIndex() {
return get('api/app/recommend/appIndex')
}
export function getBanner() {
return get('api/app/banner')
}
export function getTel() {
return post('api/app/smsCode',{
//Params is used here. Just write {} instead of declaring params
mobile : 18567391972,
sms_type : 'login'
})
}

The third step is to introduce the API into the required components

import {Encapsulated function name} from 'api.js Path of'

Step 4. Then, you can go to the vue page to obtain data through the life cycle.

Note again that you don't have to use async function here. This is just one of them

async mounted() {
// Star lecturers, excellent courses, etc
let res = await getAppIndex();
//Add to array
this.startList = res.data.data.list
// Carousel chart list
var banner = await getBanner();
// console.log('rotation chart '+ banner)
if (banner.data.code == 200) {
this.bannerList = banner.data.data
}
// Mobile phone verification code interface
let Tel = await getTel();
// console.log('mobile phone verification code '+ Tel)
//
},

Thank you for watching and learning together