zoukankan      html  css  js  c++  java
  • javascript http库axios

    还是那个开源项目中的代码看到的:

    直接看axios官方的介绍吧,里面的用法介绍很全:

    https://github.com/mzabriskie/axios

    Installing

    Using npm:

    $ npm install axios

    Using cdn:

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    Example

    Performing a GET request

    // Make a request for a user with a given ID
    axios.get('/user?ID=12345')
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    
    // Optionally the request above could also be done as
    axios.get('/user', {
        params: {
          ID: 12345
        }
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });

    Performing a POST request

    axios.post('/user', {
        firstName: 'Fred',
        lastName: 'Flintstone'
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });

    Performing multiple concurrent requests

    function getUserAccount() {
      return axios.get('/user/12345');
    }
    
    function getUserPermissions() {
      return axios.get('/user/12345/permissions');
    }
    
    axios.all([getUserAccount(), getUserPermissions()])
      .then(axios.spread(function (acct, perms) {
        // Both requests are now complete
      }));

    。。。

    Response Schema

    The response for a request contains the following information.

    {
      // `data` is the response that was provided by the server
      data: {},
    
      // `status` is the HTTP status code from the server response
      status: 200,
    
      // `statusText` is the HTTP status message from the server response
      statusText: 'OK',
    
      // `headers` the headers that the server responded with
      // All header names are lower cased
      headers: {},
    
      // `config` is the config that was provided to `axios` for the request
      config: {},
    
      // `request` is the request that generated this response
      // It is the last ClientRequest instance in node.js (in redirects)
      // and an XMLHttpRequest instance the browser
      request: {}
    }

    When using then, you will receive the response as follows:

    axios.get('/user/12345')
      .then(function(response) {
        console.log(response.data);
        console.log(response.status);
        console.log(response.statusText);
        console.log(response.headers);
        console.log(response.config);
      });

    When using catch, or passing a rejection callback as second parameter of then, the response will be available through the error object as explained in the Handling Errors section.

    Config Defaults

    You can specify config defaults that will be applied to every request.

    Global axios defaults

    axios.defaults.baseURL = 'https://api.example.com';
    axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

    Interceptors

    You can intercept requests or responses before they are handled by then or catch.

    // Add a request interceptor
    axios.interceptors.request.use(function (config) {
        // Do something before request is sent
        return config;
      }, function (error) {
        // Do something with request error
        return Promise.reject(error);
      });
    
    // Add a response interceptor
    axios.interceptors.response.use(function (response) {
        // Do something with response data
        return response;
      }, function (error) {
        // Do something with response error
        return Promise.reject(error);
      });

    If you may need to remove an interceptor later you can.

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

    You can add interceptors to a custom instance of axios.

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

    Handling Errors

    axios.get('/user/12345')
      .catch(function (error) {
        if (error.response) {
          // The request was made and the server responded with a status code
          // that falls out of the range of 2xx
          console.log(error.response.data);
          console.log(error.response.status);
          console.log(error.response.headers);
        } else if (error.request) {
          // The request was made but no response was received
          // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
          // http.ClientRequest in node.js
          console.log(error.request);
        } else {
          // Something happened in setting up the request that triggered an Error
          console.log('Error', error.message);
        }
        console.log(error.config);
      });

    You can define a custom HTTP status code error range using the validateStatus config option.

    axios.get('/user/12345', {
      validateStatus: function (status) {
        return status < 500; // Reject only if the status code is greater than or equal to 500
      }
    })

    Cancellation

    You can cancel a request using a cancel token.

    The axios cancel token API is based on the withdrawn cancelable promises proposal.

    You can create a cancel token using the CancelToken.source factory as shown below:

    var CancelToken = axios.CancelToken;
    var source = CancelToken.source();
    
    axios.get('/user/12345', {
      cancelToken: source.token
    }).catch(function(thrown) {
      if (axios.isCancel(thrown)) {
        console.log('Request canceled', thrown.message);
      } else {
        // handle error
      }
    });
    
    // cancel the request (the message parameter is optional)
    source.cancel('Operation canceled by the user.');

    You can also create a cancel token by passing an executor function to the CancelToken constructor:

    var CancelToken = axios.CancelToken;
    var cancel;
    
    axios.get('/user/12345', {
      cancelToken: new CancelToken(function executor(c) {
        // An executor function receives a cancel function as a parameter
        cancel = c;
      })
    });
    
    // cancel the request
    cancel();

    Note: you can cancel several requests with the same cancel token.

     
  • 相关阅读:
    我的IT之路2011(二)
    用三层架构画类图的基本结构
    计算机教育学术交流会
    我的IT之路2011(一)
    Canvas中元素的定位
    对话框中的数据绑定(WPF)
    {Binding}详释 (WPF)
    Polyline的问题
    How do I sort groups of data items?(WPF)
    Excel Services OverView系列--3使用Excel Web Services操作Excel工作薄
  • 原文地址:https://www.cnblogs.com/guazi/p/6770301.html
Copyright © 2011-2022 走看看