【Axios】axios的使用

axios是基于promise封装的网络请求库，在多处框架中被使用。axios让整个网络变得更加简单明了，不像ajax那么复杂。在文档中已经有了对axios的详细的介绍，本篇文章对文档中的重点进行整理，并结合实际项目来对axios进行分析。

1.axios请求

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.get('/admin')								// 基于promise
	.then(function(response) {
		console.log(response);
	}.catch(function(err) {
		console.log(err);
	})
)

2.axios实例

通过axios.create([config])创建一个axios实例，一个axios实例同样具备以上的请求方法。

3.axios请求配置

文档中有完整的请求配置参数，我将常用的几点来说明一下。
baseURL: 'https://some-domain.com/api/'项目服务端地址的基地址配置，往往在新建axios实例时就需要配置好。
url: '/user' 请求的url，实例中是相对url，绝对url是跟baseURL拼接的完整体。
method: 'get' 请求方法，默认方法是get。
headers: {'X-Requested-With': 'XMLHttpRequest'} 请求头的配置，根据服务端的需求进行配置。
data: { firstName: 'Fred' } PUT、POST、PATCH请求方法中传递的数据。
timeout: 1000 请求超时时间设定，单位是毫秒，超过时间将中断请求

4.配置的优先次序

用文档中的一个例子

// 使用由库提供的配置的默认值来创建实例
// 此时超时配置的默认值是 `0`
var instance = axios.create();

// 覆写库的超时默认值
// 现在，在超时前，所有请求都会等待 2.5 秒
instance.defaults.timeout = 2500;

// 为已知需要花费很长时间的请求覆写超时设置
instance.get('/longRequest', {
  timeout: 5000
});

优先次序: axios文档中配置的默认值 < 实例的配置 < 具体请求的配置

4.拦截器

axios拦截器分为请求拦截器和响应拦截器，在拦截器中我们一般会进行响应头的设置或者是状态码的处理等等。再来看 文档给我们提供的案例。

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

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

5.结合项目做axios配置

我最近的项目用的是iView admin的后台管理系统，项目的网络请求用的就是axios，项目中它为我们封装好了axios请求类，贴上代码。

import axios from 'axios'
class HttpRequest {
  constructor () {
    this.baseUrl = baseUrl													// 这里是传入的基地址
    this.queue = {}
  }
  getInsideConfig () {														// 基础请求的配置方法
    const config = {														// 这里我们配置好请求的基础设置，服务端需要的请求头等
      baseURL: this.baseUrl,
      headers: {
        'Content-Type': 'application/json;charset=utf-8',
        'Accept': 'application/json'
      }
    }
    return config
  }
  interceptors (instance, url) {											// 请求和响应拦截器方法
    // 请求拦截
    instance.interceptors.request.use(config => {							// 请求拦截器方法
      // 添加全局的loading...													// 一般在这里给config参数加上验证头的token
      config.headers['Authorization'] = token 			//设置验证头
      return config
    }, error => {
      return Promise.reject(error)
    })
    // 响应拦截
    instance.interceptors.response.use(res => {								// 响应拦截器方法
      if (res.status !== 200 && res.status !== 201 && res.status !== 202 && res.status !== 204) {
			// 这里根据状态码解决响应
    }
      return Promise.resolve(res)
    },error => {
      if (error.response.status === 401) {
        // 这里根据错误状态码进行路由跳转，比如没有权限跳转到登录界面，500错误跳转到服务器错误界面
      } 
      return Promise.reject(error)
    })
  }
  request (options) {											// 结合以上方法创建axios实例，并返回请求实例
    const instance = axios.create()
    options = Object.assign(this.getInsideConfig(), options)
    this.interceptors(instance, options.url)
    return instance(options)
  }
}
export default HttpRequest