axios基本用法、axios如何发起网络请求？如何二次封装axios？

前言

axios是目前最为热门的ajax请求库，前端两大框架Vue和React官方都推荐使用axios发送ajax请求。

axios可以用在浏览器和 node.js 中，axios负责与后端交互，get、post后端接口信息，相当前后端的窗口。

一、什么是axios

定义

axios是一个基于promise的专门用于网络请求的库
官网：https://github.com/axios/axios

优点

① 相比于原生的XMLHttpRequest对象，axios简单易用
② 相比较于jQuery，axios更加轻量化，只专注于网络数据请求
③ 支持浏览器和node.js
④ 支持Promise
⑤ 能拦截请求和响应
⑥ 自动转化JSON数据

axios常用的API

二、axios发起GET请求

语法

data属性名称是固定的，用于获取后台响应的数据

axios.get('url',{params: paramsObj }).then(res=>{
  console.log(res.data)
})
1
2
3

基本使用

// 请求的URL地址
var url = 'http://www.liulongbin.top:3006/api/get';
// 请求的参数对象
var paramsObj = { name: 'zs', age: 20 };
// 调用axios.get()函数发起get请求
axios.get(url, { params: paramsObj }).then(function (res) {
  console.log(res.data)
})
1
2
3
4
5
6
7
8

二、axios发起POST请求

语法

axios.post('url', paramsObj).then(callback) 
1

基本使用

// 请求的URL地址
var url = 'http://www.liulongbin.top:3006/api/post';
// 要提交服务器的数据
var dataObj = { address: '北京', location: '顺义区' };
// 调用axios.post()函数发起post请求
axios.post(url, dataObj).then(function (res) {
  console.log(res.data)
})
1
2
3
4
5
6
7
8

三、直接使用axios发起请求

axios也提供了类似于jQuery中$.ajax()函数
params参数是路径参数，data参数是请求体参数

语法

axios({
  method: '请求类型',
  url: '请求的URL地址',
  params: paramsData,
}).then(callback)
1
2
3
4
5

基本使用

// 发起GET请求
axios({
  method: 'GET',
  url: 'http://www.liulongbin.top:3006/api/get',
  params: {name:'憨瓜',age:3}, // get参数要通过paramas属性提供
}).then(function (res) {
  console.log(res.data)
})

// 发起POST请求
axios({
  method: 'POST',
  url: 'http://www.liulongbin.top:3006/api/post',
  data: { // post数据要通过data属性提供
    name: '娃哈哈',
    age: 18,
    gender: '女'
  }
}).then(function (res) {
  console.log(res.data)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

四、axios响应结果

五、axios的全局配置

超时时间

axios.defaults.timeout = 3000
1

默认地址

axios.defaults.baseURL= 'http://www.aaaaa.com'
1

设置请求头

axios.defaults.headers['mytoken']= 'aaadthbjuykjjyu'
1

六、axios拦截器

1、请求拦截器

在请求发出之前设置一些信息，主要处理请求token的统一注入问题

axios.interceptors.request.use(function(config){
  // 在请求发出之前进行一些信息设置
  // config是请求的配置信息，无论什么时候都需要return config，否则报错
  return config;
},function(err){
  // 处理响应错误的信息
})
1
2
3
4
5
6
7

2、响应拦截器

在获取数据之前对数据做一些加工处理，主要用于响应返回的数据异常和数据结构问题

axios.interceptors.response.use(function(config){
   // 在这里对返回的函数进行处理
   return res;
 },function(err){
   // 处理响应错误的信息
 })
1
2
3
4
5
6

七、简单二次封装axios

为什么要二次封装axios

减少代码冗余，便于我们更好的管理API接口

如何封装

1、导入axios

import axios from "axios";
1

2、设置基础路径和请求超时时间

//利用axios对象的方法create，去创建一个axios实例
const service = axios.create({
  //基础路径
  baseURL:'/api',
  //请求超时时间   （5s内没响应就失败了）
  timeout:5000
})
1
2
3
4
5
6
7

3、设置请求头数据格式

大部分情况下，请求头都是固定的，只有少部分情况下，会需要一些特殊的请求头，当需要特殊请求头时，将特殊请求头作为参数传入覆盖基础配置

const service = axios.create({
	//基础路径
	baseURL:'/api',
	//请求超时时间   （5s内没响应就失败了）
	timeout:5000,
	// 设置请求头数据格式
	headers: {
	      get: {
	        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
	        // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
	      },
	      post: {
	        'Content-Type': 'application/json;charset=utf-8'
	        // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
	      }
	},
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

4、设置请求拦截器

设置请求拦截器：客户端发送请求 →【请求拦截器】→ 服务端接收
token校验(jwt)

【接收到服务器返回的token，将TA保存在本地存储里
，每一次请求的时候都应该给带上oken】

//请求拦截器  
service.interceptors.request.use((config)=>{
	// 假设我们把token存储到本地存储中的
    let token = localStorage.getItem("token");
    // token 如果存在就加在配置项的头部
    token && (config.headers.Authorization = token);
   // 请求成功的返回配置对象
  return config
},(error)=>{
  // 请求失败
  return Promise.reject(error)
})
1
2
3
4
5
6
7
8
9
10
11
12

5、设置响应拦截器

响应拦截器：服务器返回信息 →【拦截的统一处理】→ 客户端js获取到信息

//响应拦截器
service.interceptors.response.use((response)=>{
  //响应成功的返回
  return response.data
},(error)=>{
  // 响应失败
  return Promise.reject(error)
})
1
2
3
4
5
6
7
8

6、导出axios

export default service;
1

完整代码

// 引入axios
import axios from "axios";

// 创建一个axios实例
const service = axios.create({
	//基础路径
	baseURL:'/api',
	//请求超时时间   （5s内没响应就失败了）
	timeout:5000,
	// 设置请求头数据格式
	headers: {
	    get: {
	      'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
	      // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
	    },
	    post: {
	      'Content-Type': 'application/json;charset=utf-8'
	      // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
	    }
	},
})

//请求拦截器  
service.interceptors.request.use((config)=>{
    // 假设我们把token存储到本地存储中的
    let token = localStorage.getItem("token");
    // token 如果存在就加在配置项的头部
    token && (config.headers.Authorization = token);
   //请求成功的返回配置对象
  return config
},(error)=>{
  // 请求失败
  return Promise.reject(error)
})

//响应拦截器
service.interceptors.response.use((response)=>{
  //响应成功的返回
  return response.data
},(error)=>{
  //响应失败的返回
  return Promise.reject(error)
})

//导出axios实例
export default service
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46