什么是axios？axios如何发起网络请求？如何二次封装axios？

目录

• 前言
• 一、什么是axios
• • 定义
  • 优点
• 二、axios发起GET请求
• • 语法
  • 基本使用
• 二、axios发起POST请求
• • 语法
  • 基本使用
• 三、直接使用axios发起请求
• • 语法
  • 基本使用
• 四、简单二次封装axios
• • 为什么要二次封装axios
  • 如何封装
  • • 1、导入axios
    • 2、设置基础路径和请求超时时间
    • 3、设置请求头数据格式
    • 4、设置请求拦截器
    • 5、设置响应拦截器
    • 6、导出axios
  • 完整代码

前言

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

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

一、什么是axios

定义

axios是一个基于promise的专门用于网络请求的库

优点

相比于原生的XMLHttpRequest对象，axios简单易用
相比较于jQuery，axios更加轻量化，只专注于网络数据请求

二、axios发起GET请求

语法

axios.get('url', { params: paramsObj }).then(callback) 

基本使用

// 请求的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)
})

二、axios发起POST请求

语法

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

基本使用

// 请求的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)
})

三、直接使用axios发起请求

axios也提供了类似于jQuery中$.ajax()函数

语法

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

基本使用

// 发起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)
})

四、简单二次封装axios

为什么要二次封装axios

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

如何封装

1、导入axios

import axios from "axios";

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

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

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'
	        // 在开发中，一般还需要单点登录或者其他功能的通用请求头，可以一并配置进来
	      }
	},
})

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

5、设置响应拦截器

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

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

6、导出axios

export default service;

完整代码

// 引入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
},(error)=>{
  Nprogress.done()
  //响应失败的返回
  return Promise.reject(error)
})

//导出axios实例
export default service