认识 axios 以及运用 request 封装 axios

原创已于 2023-07-16 20:40:19 修改 · 693 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2023-03-28 15:11:25 首次发布

一些重要笔记同时被 2 个专栏收录

28 篇文章

订阅专栏

20 篇文章

订阅专栏

Axios是一个基于Promise的HTTP库，可用于浏览器和node.js。它支持各种HTTP请求方法，如GET、POST、PUT、DELETE等，以及请求和响应拦截器、请求取消功能。在Vue或React项目中，常被用来进行Ajax请求。安装Axios后，可以通过配置基础URL、添加拦截器等方式自定义请求。

axios 是什么

前端最流行的 ajax 请求库
react / vue官方推荐使用 axios 发 ajax 请求
文档 GitHub - axios/axios: Promise based HTTP client for the browser and node.js

axios 特点

基于 promise 的异步 ajax 请求库
浏览器端 / node 端都可以使用
支持请求 / 响应拦截器
支持请求取消
请求 / 响应数据转换
批量发送多个请求

axios 常用语法

nam	value
axios(config)	通用 / 最本质的发任意类型请求的方式
axios(url[,config])	可以只指定 url 发 get 请求
axios.request(config)	等同于axios(config)
axios.get(url[,config])	发 get 请求
axios.delete(url[,config])	发 delete 请求
axios.post(url[,data,config])	发 post 请求
axios.put(url[,data,config])	发 put 请求


axios.defaults.xxx	请求非默认全局配置
axios.interceptors.request.use()	添加请求拦截器
axios.interceptors.response.use()	添加响应拦截器


axios.create([config])	创建一个新的axios(他没有下面的功能)


axios.Cancel()	用于创建取消请求的错误对象
axios.CancelToken()	用于创建取消请求的token对象
axios.isCancel()	是否是一个取消请求的错误
axios.all(promise)	用于批量执行多个异步请求

axios 安装

npm install axios

vue 项目使用

在 main.js

import axios from 'axios'
Vue.prototype.$api = axios

html 直接导入就行了

<script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>

axios 简单使用

默认 get 请求

// 配置默认基本路径
axios.defaults.baseURL = 'http://localhost:8000'

// 默认get请求
axios({
	url:"/post",
	params:{
		id:8
	}
}).then(res=>{
	console.log(res)
},err=>{
    console.log(err)
})

post 请求

// post请求
axios.post("/post",{id:3}).then(result=>{
	console.log(result)
},err=>{
    console.log(err)
})

// 或

axios({
	url:"/post",
	method:'post'
	data:{
		id:3
	}
}).then(result=>{
	console.log(result)
},err=>{
    console.log(err)
})

put 请求

axios.put("/posts/4",{
      "title": "json-server---1",
      "author": "typicode",
    }).then(res=>{
	console.log(res)
},err=>{
    console.log(err)
})

// 或
axios({
	url:"/posts",
	method:'put '
	data:{
      "title": "json-server---1",
      "author": "typicode",
    }
}).then(res=>{
	console.log(res)
},err=>{
    console.log(err)
})

delete 请求

axios.delete("/posts/4",{
      "title": "json-server---1",
      "author": "typicode",
    }).then(res=>{
	console.log(res)
},err=>{
    console.log(err)
})

// 或
axios({
	url:"/posts",
	method:'delete'
	data:{
		id:1
	}
}).then(res=>{
	console.log(res)
},err=>{
    console.log(err)
})

axios 难点语法

axios.create(config) 对 axios 请求进行二次封装

根据指定配置创建一个新的 axios ,也就是每个axios 都有自己的配置

新的 axios 只是没有 取消请求 和 批量请求 的方法，其它所有语法都是一致的

为什么要这种语法？

需求，项目中有部分接口需要的配置与另一部分接口的配置不太一样

解决：创建2个新的 axios ，每个都有自己的配置，分别对应不同要求的接口请求

代码

import axios from 'axios'

// axios.create() 方法用于创建一个新的 axios
const axios = axios.create({
    baseURL:'http://localhost:3000'，
    timeout:5000
})

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

export default axios

具体配置详见官网起步 | Axios 中文文档 | Axios 中文网