axios学习总结

• axios的概念

  axios是基于Promise的HTTP库，用于客户端和node.js

• axios的特征

  • 支持浏览器和node.js，从浏览器发出XMLHttpRequests，从node.js发出http请求
  • 支持Promise
  • 可以拦截请求和响应
  • 转换请求和响应数据
  • 能取消请求
  • 自动转换JSON数据
  • 浏览器支持防止CSRF（跨站请求伪造）

• 安装

  • 使用npm

  npm install axios
  

  • 使用bower

  bower install axios
  

  • 使用yarn

  yarn add axios
  

  • 使用CDN

• 使用axios

  • 可以通过向axios传递相关配置来创建请求

    // 发送 POST 请求
    axios({
      method: 'post',
      url: '/user/12345',
      data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
      }
    });
    

  • axios为请求方法提供了别名

    axios.request(config)

    axios.get(url[, config])

    axios.delete(url[, config])

    axios.head(url[, config])

    axios.post(url[, data[, config]])

    axios.put(url[, data[, config]])

    axios.patch(url[, data[, config]])

  • 可以使用自定义配置新建一个 axios 实例

    axios.create([config])

    var instance = axios.create({
      baseURL: 'https://xxx',
      timeout: 1000,
      headers: {'X-Custom-Header': 'foobar'}
    });
    

• 请求配置

  配置中只有url是必需的，如果没有指定method请求回默认使用get方法

  {
    // `url` is the server URL that will be used for the request
    url: '/user',
  
    // `method` is the request method to be used when making the request
    method: 'get', // default
  
    // `baseURL` will be prepended to `url` unless `url` is absolute.
    // It can be convenient to set `baseURL` for an instance of axios to pass relative URLs
    // to methods of that instance.
    baseURL: 'https://some-domain.com/api/',
  
    // `transformRequest` allows changes to the request data before it is sent to the server
    // This is only applicable for request methods 'PUT', 'POST', 'PATCH' and 'DELETE'
    // The last function in the array must return a string or an instance of Buffer, ArrayBuffer,
    // FormData or Stream
    // You may modify the headers object.
    transformRequest: [function (data, headers) {
      // Do whatever you want to transform the data
  
      return data;
    }],
  
    // `transformResponse` allows changes to the response data to be made before
    // it is passed to then/catch
    transformResponse: [function (data) {
      // Do whatever you want to transform the data
  
      return data;
    }],
  
    // `headers` are custom headers to be sent
    headers: {'X-Requested-With': 'XMLHttpRequest'},
  
    // `params` are the URL parameters to be sent with the request
    // Must be a plain object or a URLSearchParams object
    params: {
      ID: 12345
    },
  
    // `paramsSerializer` is an optional function in charge of serializing `params`
    // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
    paramsSerializer: function (params) {
      return Qs.stringify(params, {arrayFormat: 'brackets'})
    },
  
    // `data` is the data to be sent as the request body
    // Only applicable for request methods 'PUT', 'POST', 'DELETE , and 'PATCH'
    // When no `transformRequest` is set, must be of one of the following types:
    // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
    // - Browser only: FormData, File, Blob
    // - Node only: Stream, Buffer
    data: {
      firstName: 'Fred'
    },
    
    // syntax alternative to send data into the body
    // method post
    // only the value is sent, not the key
    data: 'Country=Brasil&City=Belo Horizonte',
  
    // `timeout` specifies the number of milliseconds before the request times out.
    // If the request takes longer than `timeout`, the request will be aborted.
    timeout: 1000, // default is `0` (no timeout)
  
    // `withCredentials` indicates whether or not cross-site Access-Control requests
    // should be made using credentials
    withCredentials: false, // default
  
    // `adapter` allows custom handling of requests which makes testing easier.
    // Return a promise and supply a valid response (see lib/adapters/README.md).
    adapter: function (config) {
      /* ... */
    },
  
    // `auth` indicates that HTTP Basic auth should be used, and supplies credentials.
    // This will set an `Authorization` header, overwriting any existing
    // `Authorization` custom headers you have set using `headers`.
    // Please note that only HTTP Basic auth is configurable through this parameter.
    // For Bearer tokens and such, use `Authorization` custom headers instead.
    auth: {
      username: 'janedoe',
      password: 's00pers3cret'
    },
  
    // `responseType` indicates the type of data that the server will respond with
    // options are: 'arraybuffer', 'document', 'json', 'text', 'stream'
    //   browser only: 'blob'
    responseType: 'json', // default
  
    // `responseEncoding` indicates encoding to use for decoding responses (Node.js only)
    // Note: Ignored for `responseType` of 'stream' or client-side requests
    responseEncoding: 'utf8', // default
  
    // `xsrfCookieName` is the name of the cookie to use as a value for xsrf token
    xsrfCookieName: 'XSRF-TOKEN', // default
  
    // `xsrfHeaderName` is the name of the http header that carries the xsrf token value
    xsrfHeaderName: 'X-XSRF-TOKEN', // default
  
    // `onUploadProgress` allows handling of progress events for uploads
    // browser only
    onUploadProgress: function (progressEvent) {
      // Do whatever you want with the native progress event
    },
  
    // `onDownloadProgress` allows handling of progress events for downloads
    // browser only
    onDownloadProgress: function (progressEvent) {
      // Do whatever you want with the native progress event
    },
  
    // `maxContentLength` defines the max size of the http response content in bytes allowed in node.js
    maxContentLength: 2000,
  
    // `maxBodyLength` (Node only option) defines the max size of the http request content in bytes allowed
    maxBodyLength: 2000,
  
    // `validateStatus` defines whether to resolve or reject the promise for a given
    // HTTP response status code. If `validateStatus` returns `true` (or is set to `null`
    // or `undefined`), the promise will be resolved; otherwise, the promise will be
    // rejected.
    validateStatus: function (status) {
      return status >= 200 && status < 300; // default
    },
  
    // `maxRedirects` defines the maximum number of redirects to follow in node.js.
    // If set to 0, no redirects will be followed.
    maxRedirects: 5, // default
  
    // `socketPath` defines a UNIX Socket to be used in node.js.
    // e.g. '/var/run/docker.sock' to send requests to the docker daemon.
    // Only either `socketPath` or `proxy` can be specified.
    // If both are specified, `socketPath` is used.
    socketPath: null, // default
  
    // `httpAgent` and `httpsAgent` define a custom agent to be used when performing http
    // and https requests, respectively, in node.js. This allows options to be added like
    // `keepAlive` that are not enabled by default.
    httpAgent: new http.Agent({ keepAlive: true }),
    httpsAgent: new https.Agent({ keepAlive: true }),
  
    // `proxy` defines the hostname and port of the proxy server.
    // You can also define your proxy using the conventional `http_proxy` and
    // `https_proxy` environment variables. If you are using environment variables
    // for your proxy configuration, you can also define a `no_proxy` environment
    // variable as a comma-separated list of domains that should not be proxied.
    // Use `false` to disable proxies, ignoring environment variables.
    // `auth` indicates that HTTP Basic auth should be used to connect to the proxy, and
    // supplies credentials.
    // This will set an `Proxy-Authorization` header, overwriting any existing
    // `Proxy-Authorization` custom headers you have set using `headers`.
    proxy: {
      host: '127.0.0.1',
      port: 9000,
      auth: {
        username: 'mikeymike',
        password: 'rapunz3l'
      }
    },
  
    // `cancelToken` specifies a cancel token that can be used to cancel the request
    // (see Cancellation section below for details)
    cancelToken: new CancelToken(function (cancel) {
    }),
  
    // `decompress` indicates whether or not the response body should be decompressed 
    // automatically. If set to `true` will also remove the 'content-encoding' header 
    // from the responses objects of all decompressed responses
    // - Node only (XHR cannot turn off decompression)
    decompress: true // default
  
  }
  

• 拦截器

  在请求或响应被 then 或 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) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    return response;
  }, function (error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    return Promise.reject(error);
  });

如果你想在稍后移除拦截器，可以这样：

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

可以为自定义 axios 实例添加拦截器

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

• axios在Vue中使用

  • 第一种，把axios绑定在Vue的实例的原型对象上，因为axios是HTTP库，没有install方法，所以无法使用Vue.use()导入

  首先在项目中安装axios，安装完成后进入main.js

  import Vue from 'vue'
  import axios from 'axios'
  Vue.prototype.$axios = axios    //全局注册，使用方法为:this.$axios
  

  • 第二种，因为axios是HTTP库，所以可以单独抽象出一个api层，在api层中自定义一个axios的实例，并按不同的功能去编写请求

  // 新建api文件夹,按功能分为不同的请求文件，首先创建api.js,
  // api.js
  import axios from 'axios'
  const request = axios.create({
      baseURL: 'https://xxx'
  })
  export default request
  

  
  //再按功能创建文件 例如 ： 首页的请求，创建home.js文件
  // home.js
  import {
      request
  } from './api.js'
  
  // 获取用户信息
  export const getUser = () => {
      return request({
          method: 'GET',
          url: '/api/user'
      })
  }
  
  // 更新用户数据
  export const updateUser = data => {
      return request({
          method: 'PUT',
          url: '/api/user',
          data
      })
  }
  
  

  //在使用请求的时候按需加载
  // home.vue
  import { getUser, updateUser } from "@/api/home";
  
  // 接着在你使用的位置调用就好了，这里以mounted中为例
  async mounted () {
    const { data } await getUser()
  }