axios

axios

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

特性

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

使用前先CDN引入或npm安装依赖

axios API

axios(config)，config是配置对象，该方法返回一个Promise对象

axios({
	url: '',
	method: '',
	data: {}, // 请求头
    。。。
})
// 或axios(url[, config])
axios('url'); // 发送默认的GET请求

处理并发请求的助手函数：

axios.all(iterable)
axios.spread(callback)

创建axios实例

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

axios.create([config])

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

常用请求方法作为axios实例的方法使用：

instance.get(url[, config]);
instance.post(url[, data, config]);
instance.delete(url[, config])

**注意：**在使用别名方法时， config对象中不包含url、method、data 这些属性，config将与创建axios实例时的config合并。

config的常用可选项：

{
    url: '',
    method: '',
    baseURL: '', // 自动加在url的前面
    // 请求头
    headers: {
        'key': 'value'
    },
    // url的附加参数
    params: {
        key: value
    },
    // POST请求的请求体
    data: {
        key: value
    },
    // 请求超时的毫秒数
    timeout: ms,
    // 响应的数据类型
    responseType: 'json', // 默认为json，可选值：'arraybuffer', 'blob', 'document',
    ......
}

响应结构

请求的响应对象结构：

{
    data: {},
    status: 200,
    statusText: 'OK',
    headers: {}, // 响应头
    。。。。。。
}

一个axios的使用示例：

axios.get('url').then((response) => {
    console.log(response.data);
});

默认配置值

设置全局的配置项默认值：

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = token;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

这些配置值将作为各个请求的配置默认值。

设置axios实例的默认配置值：

// Set config defaults when creating the instance
const instance = axios.create({
  baseURL: 'https://api.example.com'
});

// Alter defaults after instance has been created
instance.defaults.headers.common['Authorization'] = token;

这些配置值将作为该axios实例的请求方法的配置默认值。

默认值可以被方法内设置的配置对象覆盖。

请求/响应拦截器

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

// 添加请求拦截器
axios.interceptors.request.use(function (config) {// config是一个对象，提供一些与请求相关的属性
    // 在发送请求之前做些什么
    console.log(config.url);
    console.log(config.method)
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {// response是一个对象，包含：config对象（同上述config对象），data属性（浏览器返回的数据），headers对象，request对象，响应状态码和状态字符串。
    // 对响应数据做点什么
    console.log(response);
    return response.data;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

// 示例
axios.get('http://47.100.62.167:8002/swagger-ui.html').then((value) => {
	console.log(value);// 返回的data属性数据
})
axios.post('http://47.100.62.167:8002/user/login', {
	username: 'admin1',
    password: '123321'
}).then((value) => {
    console.log("post response:", value);
})

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

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

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

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