axios personal summary

1.axios installation

npm install axios

import axios from 'axios'

2.axios use

Use the format is

1.axios ({configuration}). Then (res => {console.log (res)}). Catch (err => {console.log (err)})
// res data obtained, wherein the data is obtained res.data rest are automatically carried axios transactions;
// axios Promise integrated functions may be stored, it can be stored as data objects as obtained;

2.axios.get ( 'url', {params : { get placed inside specific parameters}}); 
// get request special parameters, placed in params adapter automatically after the url, of course, also be written directly in the url;

3.axios. post ( 'url', {data : { placed inside post-specific parameters}}); 
// post request specific, post parameters must be placed in the data attribute set;

4.axios.delete ( 'url', {});
5.axios.head ( 'url', {});
6.axios.put('url',{});
....

axios The simplest application is still the first line

3. Basic Configuration (Global)

Axios (easiest application means) is only one parameter ``} {configuration parameters, the parameter request is many times that many configuration attributes are repeated, it is possible to set a global configuration, similar to the prototype object chain configuration js

Note: After the global configuration, this project will use all axios the default configuration, the same configuration global configuration can be only one, for example, can not exist simultaneously two baseURL

axios.defaults. = configuration attributes 'value' 
// modify the default attributes corresponding to this item of axios

4. common arrangement

Request address url: '...'

Type of request method: get // default to get

Request the root path baseURL: "https://www.baidu.com/" // url is not in the case of absolute positioning, the root path is automatically added before the url

Before the data request processing transformRequest: (data) => {...} 

The data request processing transformResponse: (data) => {...}

Custom request header headers: {...}

get request parameters params: {...}

post request parameter data: {...}

Parameter sequence of (JSON) function paramsSerializer: (params) => {...}

5.axios instantiated

Why should instantiate: Because of the relationship between global configuration, the entire axios can only have one global configuration, and can have multiple instances of the equivalent of a different configuration call

By import axios from 'axios' obtained is a global Axios Axios, Axios provided arranged on both global global configuration,

Generating global axios == == "axios instance (instance arranged on, i.e., on the global configuration of the example, referred to as configuration examples)

In the face of a different server, generating a corresponding instance

Generation

const instancel = axios.create ({internal configuration example of configuration is the one written})

instancel has the same methods axios, written in creating the instance is configured for instance when configuring the global shared
instancel ({url: '...' }). then (res => {...}) // Example How to apply

6.axios Notes

Thinking: axios referenced only once, in requrst.js, the file is created and led out only Axios example, from other files (home.js) application to be written in the corresponding function with a different example, the last file referenced by other vue these functions apply

axios → requrst.js (and returns to create different instances, in which the baseURL) → home.js (accepted example, and creates a corresponding application function) → vue file (or corresponding reference home.js function calls and access application value)

Why, because it is a third-party program, to prevent a large area is no longer updated or modified, to do so, only modified files only requrst.js, the rest of the input and output files by their own handwriting, to ensure the normal function to run normally

The following is a detailed Code

requrst.js

 import axios from 'axios';
export function request(config){
    const instance = axios.create({
        baseURL:"...",
        // baseURL:"...",
        timeout:0000
    });
    
    // send real network requests
    return instance(config);
}

home.js

import { request } from './request.js'

export function getHomeMultidata() {
    return request({ url: '/home/multidata' })
}

export function getHomeGoods(type, page) {
    return request({ url: '/home/data', params: { type, page } }) 
}

vue file

<script>
    import { getHomeMultidata } from "@network/home.js"; //引用
    
    mounted(){
    getHomeMultidata (). then (res => {// perform
      this.banners = res.data.banner.list;
      this.recommends = res.data.recommend.list;
    });
    }

</script>

　6. interceptor

pending upgrade

axios personal summary

Guess you like