ajax之axios的使用

axios 是一个 Promise 的 ajax 库，同时支持浏览器和 nodejs 服务器，使用 axios 可以轻松的发送 GET/POST 请求,同时可以附加很多额外的功能，比如拦截器, 认证，代理，状态校验等

安装

axios 的GitHub 库的地址,点击这里

使用 cnpm/npm/yarn 安装命令

$ npm install axios # 或者 cnpm install axios

兼容性:

使用

首先查看 API

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

除了request方法外，其余第二个阐述均为config

config 对象说明

发送一个请求，在 config 中写出请求体, config 内容是:

{
  // 请求地址
  url: '/api/xxx',
  // 请求方法, 默认是Get
  method: 'get',
  // baseURL就是把这个url添加到url之前，最终的请求url为: url + baseURL, 可以在axios.default.baseURL='http://xxxx'设置
  baseURL: 'https://some-domain.com/api/',
  // 这个是用在请求体可以进行转换，接受一个数组，数组中每个值都是一个回调函数,只有在PUT, POST, PATCH中使用
  transformRequest: [function (data, headers) {
    // 其他操作
    return data;
  }],
  // 返回时转换返回体转换, 使用then/catch 会把这个data回调传递
  transformResponse: [function (data) {
    // 其他操作
    return data;
  }],
  // 请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},
  // 请求的数据，params 必须是一个自然的对象
  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'})
  },

  // Only applicable for request methods 'PUT', 'POST', and 'PATCH'
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - Browser only: FormData, File, Blob
  // - Node only: Stream, Buffer
  // 在PUT/POST/PATCH方式下，传递的请求数据
  data: {
    firstName: 'Fred'
  },
  // 如果超过1000 没有响应则请求超时
  timeout: 1000,
  // `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`.
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },
  // `responseType` indicates the type of data that the server will respond with
  // options are 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  responseType: 'json', // 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
  // 上传进度回调
  onUploadProgress: function (progressEvent) {
    // Do whatever you want with the native progress event
  },
  // `onDownloadProgress` allows handling of progress events for downloads
  // 下载进度回调
  onDownloadProgress: function (progressEvent) {
    // Do whatever you want with the native progress event
  },
  // `maxContentLength` defines the max size of the http response content allowed
  // 最大响应内容长度
  maxContentLength: 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.
  // 校验请求状态码 大于200 小于300 在Promise中使用then否则就catch
  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
  // `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
  // 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) {
  })
}

responseSchema 对象

{
  // 服务器返回的数据
  data: {},
  // 状态码
  status: 200,
  // 返回的状态文本
  statusText: 'OK',
  // 服务器返回头， 所有的返回头都是小写字母
  headers: {},
  // 配置对象, 请求的config
  config: {},
  // nodejs环境下的ClientRequest对象，浏览器环境下的XMLHttpRequest对象
  request: {}
}

发一个 GET、POST 请求

一般情况下我们最常用的就是请求数据(GET), 保存/更新数据(POST), 上传文件(POST/设置头部), 下面使用两个示例来说明:

GET 请求:

import axiso from 'axios'
axios
  .get('http://xxxx/v1/query', {
    params: {
      // ...
    }
  })
  .then(config => {
    // 这里返回的事responseSchema对象
    return config.data
  })
  .then(res => {
    // 这里才是返回体
  })

POST 请求:

import axios from 'axios'
axois
  .post('http://xxxx/xxx', {
    type: 'sb'
  })
  .then(config => {
    // responseSchema对象
    return config.data
  })
  .then(res => {
    // 返回的数据
  })

请求/返回拦截器使用

axios 可以使用拦截器，对请求和返回拦截，定义多个拦截器将依次执行, 拦截器都挂载在axios.interceptors上

// 下面的都是默认的拦截器配置
// 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)
  }
)

axios 配置

全局配置

axios.defaults.baseURL = 'https://api.example.com' // 定义访问的基础url
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN // 认证token
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded' // 请求类型

自定义配置

自定义配置的话需要构建一个 axios 实例:

// Set config defaults when creating the instance
var instance = axios.create({
  baseURL: 'https://api.example.com'
})
// Alter defaults after instance has been created
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN

配置的优先级，按照js执行顺序，后来的配置覆盖前面的配置

总结

axios 是目前最好的ajax库之一，如果兼容IE9以上选择axios作为请求库是第一选择的，作为前端开发者，如果你发现的请求正确，传值正确，按照API文档操作正确，那就去(dui)后端(辣��后端)