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)