Axios of Vue family bucket (send asynchronous request && interceptor)

Basic use of axios

1. Introduction to axios

axios asynchronous request technology

Introduction to axios: Axios is a promise-based http library that can be used in browsers and node.js

1. Axios front-end asynchronous request library is similar to jquery ajax technology

Ajax is used to post an asynchronous request to the backend service on the page, and render the data responded by the backend service to the page

jquery recommends the use of ajax technology, vue does not recommend the use of jquery framework, vue recommends the use of axios asynchronous request library

Axios summary: Post an asynchronous request on the front-end page, the page does not move after the request, and the response comes back to refresh the page part

Official website: Easy-to-use, concise and efficient http library =======》》》》Send http asynchronous request library

characteristic:

1. Create XMLHttpReques from the browser

2. Support Promise API

3. Client support to prevent CSRF

4. Provides some interfaces for concurrent requests (important, it facilitates a lot of operations)

5. Create http request from node.js

6. Intercept requests and responses

7. Transform request and response data

8. cancel request

9. Automatically convert JSON data

2. Basic use of axios

[1] Download the core js file

https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js

[2] Introduce axios core js in the page

<script src = "js/axios.min.js"></script>

【3】Send asynchronous request

1. get () method

   axios.get("https://autumnfish.cn/api/joke/list?num=10")
        .then(function(response) {           //代表请求成功之后处理
            console.log(response.data);
        })
         .catch(function(err) {                   //代表请求失败之后处理
            console.log(err);
        })

2. Post() request

    axios.post("https://autumnfish.cn/api/user/reg", {
            username: "盐焗西兰花"
        })
        .then(function(response) {
            console.log(response);
        })
        .catch(function(err) {
            console.log(err);
        })

3. Put( ) request

axios.put().then(function(response){ }).catch(function(err){});

4. Request in patch( ) mode

axios.patch().then(function(response){ }).catch(function(err){});

5. Request in delete( ) mode

axios.patch("url?id=21").then(function(response){ }).catch(function(err){});

[4] Create a default instance of axios to send a request

   
//创建axios的默认配置对象
    var instance = axios.create({
        baseURL: "https://autumnfish.cn/api/joke/", //将自动加载到URL前面，除非URL是一个绝对的URL
        timeout: 5000,           //默认加载5秒，若未加载成功，终止请求
    })

//发送 get 方式请求
    instance.get("/list?num=3")
        .then(function(response) {
            console.log(response.data)
        }).catch(function(err) {
            console.log(err)
        })

[5] Interceptor in axios

1. Function: Hand over the common parameters and response public processing in axios to the interceptor to reduce code redundancy when axios sends requests

2. Interceptor type:

a. Request interceptor

b. Response interceptor

3. The use of interceptors

a. You can add an interceptor to the original axios

b. Interceptors can be added to the created axios configuration object

Intercept requests or responses before they are processed by then or catch.

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });



// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });

If you need to remove the interceptor later, you can do this:

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

Interceptors can be added to custom axios instances.

const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});