axios使用

最新推荐文章于 2024-12-23 09:08:40 发布

原创最新推荐文章于 2024-12-23 09:08:40 发布 · 253 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #java

本文详细介绍了Axios，一个流行的JavaScript库，用于在前后端进行Ajax请求。Axios的特点包括其无DOM依赖、可拦截扩展和强大的封装复用能力。通过npm安装后，可以在Vue中全局挂载。文章列举了便捷方法如get、post、put和delete，并展示了基础的Axios使用方式，以及如何处理请求成功和失败的情况。此外，还提及了axios的配置选项和RESTful接口设计原则。

1.定义

一款ajax请求工具
特点:
01 前后端都可以使用
02 不依赖dom
03 拦截扩展强调
04 可封装复用性强

2.安装:

cd 项目目录
npm i axios -S

3.在vue全局挂载

01 导入 main.js
import axios from 'axios'
02 挂载
Vue.prototype.$axios = axios;
03 使用
this.$axios.xxx

4.便捷方法

post(url,data,config)
get(url,config)
get传递参数给后端

?参数名=参数值&参数名2=参数值2
?current=2
.delete(url,config)删除
.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删除