axios

最新推荐文章于 2025-03-11 19:02:48 发布

时光流逝·

最新推荐文章于 2025-03-11 19:02:48 发布

阅读量313

点赞数 1

文章标签： javascript java 前端

本文链接：https://blog.youkuaiyun.com/fagdg/article/details/126043741

版权

本文介绍了Axios，一个流行的前后端通用的HTTP库，其特点包括不依赖DOM，丰富的拦截器和高可复用性。详细阐述了Axios的安装、全局挂载、常用方法如GET、POST、PUT、DELETE，以及基础的API调用方式。还提到了RESTful接口设计原则，并展示了如何设置请求头和处理响应。此外，讨论了如何通过配置实现更复杂的请求操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、axios

1、定义

一款ajax请求工具

特点：1.前后端都可以使用

2.不依赖dom

3.丰富拦截，扩展功能

4.可封装，复用性强

2、安装

1.cd 项目目录

2.npm i axios -S

3、在vue全局挂载

1.导入

import axios from ‘axios’;

2.挂载

Vue.prototype.$axios=axios;

3.使用

this.$axios.xxx

4、便捷方法

1.post(url,data,config)

2.get(url,config)

get传递参数给后端
?参数名=参数值&参数名2=参数值2?current=2

3. .delete(url,config) 删除

4. .put(url,data,config) 修改

5、基础方法

axios({url,//请求的地址
    method,//请求方法 get,post,put,delete
    data,//post请求的数据
    params,//get请求的数据
    headers//请求头配置
})

6、执行结果

//网络请求成功
.then(res=>{
res.data  //请求返回的数据
})

//请求失败
.catch(err=>{
err.response.data // 返回失败数据
})

7、config axios配置

//请求头
headers:{
        //添加token
		"Authorization":'Bearer '+localStorage.getItem("token")
 	}

8、restFul
            1.接口设计风格
            2.强调每个url地址都是一个资源
            3.可以通过get,post,put,delete操作资源
            4.get获取,post新增,put修改,delete删除