使用axios发送请求的几种方式

时间：2025-01-21 07:35:52

1、是什么？

axios 它的底层是用了 XMLHttpRequest（xhr）方式发送请求和接收响应，xhr 相对于之前讲过的 fetch api 来说，功能更强大，但由于是比较老的 api，不支持 Promise，axios 对 xhr 进行了封装，使之支持 Promise，并提供了对请求、响应的统一拦截功能

2、能干啥？

axios可以用于从浏览器和应用程序中发送HTTP请求和接收响应数据。它可以用于以下操作：

  • 发送GET，POST，PUT，DELETE等HTTP请求
  • 检查HTTP响应状态码以确定请求是否成功或失败
  • 获取HTTP响应体中的数据
  • 将响应数据转换为JSON格式的数据
  • 检查HTTP请求和响应的头信息和身份验证
  • 发送JSON格式的数据作为HTTP请求体

除此之外，axios还提供了一些其他功能，例如：

  • 设置请求头信息
  • 设置响应体的格式和编码方式
  • 发送JSON格式的数据作为URL参数
  • 将HTTP请求和响应的详细信息记录到日志中
  • 支持Promise和async/await的异步编程风格

总之，axios是一个非常强大和灵活的HTTP库，可用于各种不同的应用程序和场景。

3、怎么玩？

安装

npm install axios -S

导入

import axios from 'axios'

4、方法

请求 备注
(url[config]) GET请求
(url[config]) DELETE请求
(url[config]) HEAD请求
(url[config]) OPTIONS请求
(url[data[config]]) POST请求
(url[data[config]]) PUT请求
(url[data[config]]) PATCH请求
  • config : 选项配置。例如：查询参数，请求头…
  • data : 请求体数据。最常见的是json格式数据
  • get、head : 这两种请求无法携带请求体
  • options、delete : 请求可以通过config中的data携带请求体

5、实战

异步

async fetchData() {
	axios.get('/api/user/list').then((res) => {
		console.log(res.data)
	})
}

同步

async fetchData() {
	const resp = await axios.get('/api/user/list')
	console.log(resp)
}

发送查询参数，携带请求头数据

async fetchData() {
	const resp = await axios.post(
		'/api/postHeader',
		{},
		{
			headers: {
				Authorization: 'token',
			},
		}
	)
	console.log(resp)
}

发送查询参数，特殊字符手动解析

async fetchData() {
	const name = encodeURIComponent('&&&')
	const age = 21
	const res = await axios.get(
		`/api/getParams?name=${name}&age=${age}`
	)
	console.log(res.data)
}

发送查询参数，特殊字符自动解析

async fetchData() {
	const res = await axios.get('/api/getParams', {
		params: {
			name: '&&&',
			age: 20,
		},
	})
	console.log(res.data)
}

使用请求体发送数据，格式为urlencoded

async fetchData() {
	const params = new URLSearchParams()
	params.append('name', 'zs')
	params.append('age', 20)
	const res = await axios.post('/api/getParamsPost', params)
	console.log(res.data)
}

使用请求体发送数据,格式为multipart

async fetchData() {
	const params = new FormData()
	params.append('name', 'ly')
	params.append('age', 25)
	const res = await axios.post('/api/getParamsPost', params)
	console.log(res.data)
}

使用请求体发送数据,格式为JSON

// ()
async fetchData() {
	const o = {
		name: '&&&',
		age: 20,
	}
	const res = await axios.post('/api/getJSONPost', o)
	console.log(res.data)
}

6、自定义axios实例

前面我们使用的是axios的默认配置项
下面我们手动创建axios实例，并指定相关配置项，覆盖默认的配置项

const _axios = axios.create(config)

config配置项如下

名称 含义
baseUrl 将自动加载url前面
headers 请求头，类型为简单对象
params 跟在url后面的参数，类型为简单的对象或URLSearchParams
data 请求体，类型有简单对象、FromData、URLSearchParams、File等
withCredentials 跨域时是否携带Cookie等凭证，默认为false
responseType 响应类型，默认为json 
const _axios = axios.create({
	baseURL:'/api',
	headers:{}
});
const res = _axios.get("/students", {
	name: 'zs',
	age: 19
});
console.log(res)

6、axios的拦截器

请求拦截器

const _axios = axios.create({
        baseURL: '/api',
        headers: {}
      });

_axios.interceptors.request.use(
	// 请求正常执行的函数
	config => {
		config.headers={
			Authorization:''
		}
		return config;
	},
	// 请求异常执行的函数
	error => {
		return Promise.reject(error)
	}
)

响应拦截器

_axios.interceptors.response.use(
	// 响应正常执行的函数
	resp => {

		return resp
	},
	// 响应异常执行的函数
	error => {
		if(error.response.status === 401){
			console.log("aaaa")
			return Promise.resolve(400); // 处理异常
		}
		// ......
		return Promise.reject(error)
	}
)

7、抽取通用的axios配置

import axios from 'axios'
const _axios = axios.create({
    // baseURL: 'http://localhost:8080',
    withCredentials: true
});

// 9. 拦截器
_axios.interceptors.request.use(
    function (config) {
        // 比如在这里添加统一的 headers
        config.headers = {
            Authorization: ''
        }
        return config;
    },
    function (error) {
        return Promise.reject(error);
    }
);

_axios.interceptors.response.use(
    function (response) {
        // 2xx 范围内走这里
        return response;
    },
    function (error) {
        if (error.response?.status === 400) {
            console.log('请求参数不正确');
            return Promise.resolve(400);
        } else if (error.response?.status === 401) {
            console.log('跳转至登录页面');
            return Promise.resolve(401);
        } else if (error.response?.status === 404) {
            console.log('资源未找到');
            return Promise.resolve(404);
        }
        // 超出 2xx, 比如 4xx, 5xx 走这里
        return Promise.reject(error);
    }
);

export default _axios;

这样在其他需要使用的地方直接import即可

相关文章