Axios相关知识点总结

介绍

是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

功能

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

安装

使用 npm:
    $ npm install axios
使用 bower:
    $ bower install axios
使用 cdn:
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

请求结构以及使用方式

执行GET请求

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
	console.log(response);
  })
  .catch(function (error) {
	console.log(error);
  });

// 可选地，上面的请求可以这样做
axios.get('/user', {
	params: {
	  ID: 12345
	}
  })
  .then(function (response) {
	console.log(response);
  })
  .catch(function (error) {
	console.log(error);
  });

执行POST请求

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

执行多个并发请求

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) {
	// 两个请求现在都执行完成
}));

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

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

请求方法的别名

//为方便起见，为所有支持的请求方法提供了别名
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]])
//在使用别名方法时， url、method、data 这些属性都不必在配置中指定。

创建实例

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

响应结构

{
  // `data` 由服务器提供的响应
  data: {},
  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,
  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',
  // `headers` 服务器响应的头
  headers: {},
  // `config` 是为请求提供的配置信息
  config: {}
}

使用 then 时，你将接收下面这样的响应：

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);
});

配置的默认值/defaults    

全局的 axios 默认值

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';

自定义实例默认值

// 创建实例时设置配置的默认值
var instance = axios.create({
  baseURL: 'https://api.example.com'
});

// 在实例已创建后修改默认值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

配置的优先顺序

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

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

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

拦截器

在请求或响应被 then 或 catch 处理前拦截它们。

// 添加请求拦截器
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);
  });	

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

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

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

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

错误处理

axios.get('/user/12345')
.catch(function (error) {
if (error.response) {
  // 请求已发出，但服务器响应的状态码不在 2xx 范围内
  console.log(error.response.data);
  console.log(error.response.status);
  console.log(error.response.headers);
} else {
  // Something happened in setting up the request that triggered an Error
  console.log('Error', error.message);
}
console.log(error.config);
});	

以上是针对Axios相关知识点的总结。