axios详解

1.axios介绍

1.1 什么是axios?

Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js中。

Axios（相比于原生的XMLHttpRequest对象来说）简单易用,（相比于jQuery）axios包尺寸小且提供了易于扩展的接口，是专注于网络请求的库。

axios（ajax i/o system）不是一种新技术，本质上也是对原生XHR（XMLHttpReques）的封装，只不过它是基于Promise的，是Promise的实现版本，符合最新的ES规范。

1.2 axios和ajax的区别

1. axios是通过promise实现对ajax技术的一种封装，而ajax则是实现了网页的局部数据刷新。

2. axios可以说是ajax，而ajax不止是axios。

3. 用法相同，但个别参数不同。

axios用法：

axios({url: '/getName',method: 'get',responseType: 'json', // 默认的data: {name: 'tom'}
}).then(function (response) {console.log(response);console.log(response.data);
}).catch(function (error) {console.log(error);
});

ajax的用法：

$.ajax({url: '/getName',type: 'get',dataType: 'json',data: {name: 'tom'},success: function (response) {console.log(response);}
});

2.axios的基础用法

2.1 安装axios

• 使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

• 使用 npm:

$ npm install axios

• 使用 bower:

$ bower install axios

• 使用 yarn:

$ yarn add axios

2.2 GET请求

通过给定的ID来发送请求

• 方式一

axios({method:"GET",url:'/user',params:{ID:12345}
});

• 方式二

axios('/user',{method:"GET",params:{ID:12345}
});

• 方式三

axios.get('/user',{params:{ID:12345}
})
.then(function(response){//处理结果console.log(response);
})
.catch(function(error){//处理错误console.log(error);
});

2.3 POST请求

axios.post('/user',{firstName:'Fred',lastName:'Flintstone'
})
.then(function(res){//处理结果console.log(res);
})
.catch(function(error){//处理错误console.log(error);
});

2.4 请求方式的别名

axios对不同请求方式都提供了方便的别名，当我们在使用别名方法的时候，url、method、data这几个参数不需要在配置中声明。

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

3.axios的进阶用法

3.1 axios实例的创建与配置

• 创建axios实例

语法： axios.create([config])

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

• 用创建的实例对象发送请求

instance.get('/a.json',{timeout: 3000
}).then()

• axios相关配置

这些是创建请求时可以用的配置选项。只有 url 是必需的。如果没有指定 method，请求将默认使用 GET 方法。

参数	说明
url	url是请求的服务器地址
method	method是请求资源的方式
baseURL	如果url不是绝对地址，那么baseURL将会加到url的前面
params	将请求参数拼接到url上
data	将请求参数放置到请求体里
headers	请求头
timeout	请求的超时时长，单位毫秒

• 配置示例

let instance = axios.create({// 创建实例时设置配置默baseURL: "", //请求的域名/基本地址timeout: 2000, //请求的超时时长，单位毫秒，默认。url: "/data.json", //请求路径method: "get", //请求方法headers: {//设置请求头————我们可以给请求头添加一些参数token: "",post: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}},params: { id: 5 }, //将请求参数拼接到url上data: { id: 5 }, //将请求参数放置到请求体里
});

• 三种配置方式

1. axios全局配置

axios.defaults.baseURL = 'http://localhost:8080'
axios.defaults.timeout = 1000

2. axios实例配置

let instance = axios.create();
instance.defaults.timeout = 1000

3. axios请求配置

instance.get('/login',{timeout:1000
})

配置方式的优先级：axios全局配置 < axios实例配置 < axios请求配置

3.2 拦截器

• 请求拦截器

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

• 移除拦截器

// 添加请求拦截器
const myInterceptor = axios.interceptors.request.use(function () {/*...*/});// 移除请求拦截器
axios.interceptors.request.eject(myInterceptor)