axios、$nextTick和$refs

最新推荐文章于 2024-05-31 18:23:37 发布

soephin

最新推荐文章于 2024-05-31 18:23:37 发布

阅读量115

点赞数

文章标签： javascript 前端 ajax

本文链接：https://blog.csdn.net/soephin/article/details/123192252

版权

本文介绍了axios的特点，如支持Promise、自动转换JSON数据等，并展示了其全局配置的用法。接着讨论了Vue中如何通过$refs获取DOM元素，以及在DOM更新异步操作中如何利用$nextTick确保在DOM更新后执行相应操作。

摘要由CSDN通过智能技术生成

1.axios

特点

* 支持客户端发送Ajax请求
* 支持服务端Node.js发送请求
* 支持Promise相关用法
* 支持请求和响应的拦截器功能
* 自动转换JSON数据
* axios 底层还是原生js实现, 内部通过Promise封装的

基本使用

axios({
  method: '请求方式', // get post
  url: '请求地址',
  data: {    // 拼接到请求体的参数,  post请求的参数
    xxx: xxx,
  },
  params: {  // 拼接到请求行的参数, get请求的参数
       xxx: xxx 
  }
}).then(res => {
  console.log(res.data) // 后台返回的结果
}).catch(err => {
  console.log(err) // 后台报错返回
})

全局配置

axios.defaults.baseURL = "http://123.57.109.30:3006"

// 所有请求的url前置可以去掉, 请求时, axios会自动拼接baseURL的地址在前面
getAllFn() {
axios({
url: "/api/getbooks",
method: "GET", // 默认就是GET方式请求, 可以省略不写
}).then((res) => {
console.log(res);
});
// axios()-原地得到Promise对象
},