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的区别

• axios是通过promise实现对ajax技能的一种封装，而ajax则是实现了网页的局部数据刷新。
  
• axios可以说是ajax，而ajax不止是axios。
  
• 用法相同，但个别参数不同。
  

axios用法：

1. axios({
2.     url: '/getName',
3.     method: 'get',
4.     responseType: 'json', // 默认的
5.     data: {
6.         name: 'tom'
7.     }
8. }).then(function (response) {
9.     console.log(response);
10.     console.log(response.data);
11. }).catch(function (error) {
12.     console.log(error);
13. });

复制代码

ajax的用法：

1. $.ajax({
2.     url: '/getName',
3.     type: 'get',
4.     dataType: 'json',
5.     data: {
6.       name: 'tom'
7.     },
8.     success: function (response) {
9.       console.log(response);
10.     }
11. });

复制代码

2.axios的基础用法

2.1 安装axios

• 利用 cdn:
  

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

复制代码

• 利用 npm:
  

1. $ npm install axios

复制代码

• 利用 bower:
  

1. $ bower install axios

复制代码

• 利用 yarn:
  

1. $ yarn add axios

复制代码

2.2 GET哀求

通过给定的ID来发送哀求

• 方式一
  

1. axios({
2.     method:"GET",
3.     url:'/user',
4.     params:{
5.             ID:12345
6.         }
7. });

复制代码

• 方式二
  

1. axios('/user',{
2.     method:"GET",
3.     params:{
4.             ID:12345
5.         }
6. });

复制代码

• 方式三
  

1. axios.get('/user',{
2.   params:{
3.     ID:12345
4.   }
5. })
6. .then(function(response){
7.         //处理结果
8.   console.log(response);
9. })
10. .catch(function(error){
11.         //处理错误
12.   console.log(error);
13. });

复制代码

2.3 POST哀求

1. axios.post('/user',{
2.   firstName:'Fred',
3.   lastName:'Flintstone'
4. })
5. .then(function(res){
6.         //处理结果
7.   console.log(res);
8. })
9. .catch(function(error){
10.         //处理错误
11.   console.log(error);
12. });

复制代码

2.4 哀求方式的别名

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

1. axios.request(config);
3. axios.get(url[,config]);
5. axios.delete(url[,config]);
7. axios.head(url[,config]);
9. axios.post(url[,data[,config]]);
11. axios.put(url[,data[,config]])
13. axios.patch(url[,data[,config]])

复制代码

3.axios的进阶用法

3.1 axios实例的创建与配置

• 创建axios实例
  

   语法： axios.create([config])

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

复制代码

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

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

复制代码

• axios相关配置
  

这些是创建哀求时可以用的配置选项。只有 url 是必需的。如果没有指定 method，哀求将默认利用 GET 方法。
参数说明urlurl是哀求的服务器所在methodmethod是哀求资源的方式baseURL如果url不是绝对所在，那么baseURL将会加到url的前面params将哀求参数拼接到url上data将哀求参数放置到哀求体里headers哀求头timeout哀求的超时时长，单位毫秒

• 配置示例
  

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

复制代码

• 三种配置方式
  

• axios全局配置
  

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

复制代码

• axios实例配置
  

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

复制代码

• axios哀求配置
  

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

复制代码

  配置方式的优先级：axios全局配置 < axios实例配置 < axios哀求配置
  3.2 拦截器

• 哀求拦截器
  

1. // 添加请求拦截器
2. axios.interceptors.request.use(function (config) {
4.   // 在发送请求之前做些什么
5.   
6.   return config;
7. }, function (error) {
9.   // 对请求错误做些什么
10.   
11.   return Promise.reject(error);
12. });

复制代码

• 响应拦截器
  

1. // 添加响应拦截器
2. axios.interceptors.response.use(function (response) {
4.   // 2xx 范围内的状态码都会触发该函数。
5.   // 对响应数据做点什么
6.   
7.   return response;
8. }, function (error) {
10.   // 超出 2xx 范围的状态码都会触发该函数。
11.   // 对响应错误做点什么
12.   
13.   return Promise.reject(error);
14. });

复制代码

• 移除拦截器
  

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

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。