axios学习总结

首先安装npm: npm install axios

向 axios 传递相关配置来创建请求

//引入axios
import axios from 'axios';

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

// 发起一个 GET 请求 (默认请求方式) 
axios('/user/12345');

为了方便起见，已经为所有支持的请求方法提供了别名。

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]])

起别名的方式创建请求（如果需要用到this，请使用箭头函数）

//get请求
axios.get('/user?ID=12345') //请求地址和参数
.then(function (response) { // 处理成功情况 console.log(response); }) 
.catch(function (error) { // 处理错误情况 console.log(error); })
.then(function () { // 总是会执行 });

axios.get('/user', { params: { ID: 12345 } }) //参数的另一种写法

//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'); } //声明一个返回get请求的函数
function getUserPermissions() { return axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' })} //声明一个返回post请求的函数
Promise.all([getUserAccount(), getUserPermissions()]) //发起多个请求
.then(function (results) { const acct = results[0]; const perm = results[1]; }); // 处理成功情况

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

自定义实例默认值（适用于多个地址）

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

以下是可用的实例方法。指定的配置将与实例的配置合并。
instance.request(config)

instance.get(url[, config])
 
instance.delete(url[, config])
 
instance.head(url[, config])

instance.options(url[, config])

instance.post(url[, data[, config]])
 
instance.put(url[, data[, config]])
 
instance.patch(url[, data[, config]])

拦截器

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

// 添加请求拦截器 
axios.interceptors.request.use(
function (config) { // 在发送请求之前做些什么 return config; },
function (error) { // 对请求错误做些什么 return Promise.reject(error); }); 
// 添加响应拦截器 
axios.interceptors.response.use(
function (response) { // 2xx 范围内的状态码都会触发该函数。 
// 对响应数据做点什么 return response; }, 
function (error) { // 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么 return Promise.reject(error); });

取消请求

let cancel; 
axios.get('/user/12345', { cancelToken: new axios.CancelToken(function executor(c) { 
// executor 函数接收一个 cancel 函数作为参数 cancel = c; }) }); 

// 取消请求 
cancel();