Vue中使用Axios请求后端接口的方法总结

最新推荐文章于 2024-07-29 10:24:25 发布

小白-先森

最新推荐文章于 2024-07-29 10:24:25 发布

阅读量4.4k

点赞数 3

分类专栏：项目遇到的问题总结文章标签： vue.js javascript ajax

本文链接：https://blog.csdn.net/Allurewuhui/article/details/121778938

版权

本文总结了在Vue项目中如何使用Axios进行后端接口请求的方法。首先在入口文件全局配置Axios，包括设置请求头根路径和请求头拦截器。然后详细介绍了get、post、delete和put四种请求方式的参数格式，提供了一站式的Vue Axios请求指南。

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

1.在入口文件引入axios并配置请求头根路径和请求头拦截

// 引入axios
import axios from 'axios'
// 设置请求根路径 
axios.defaults.baseURL='http://127.0.0.1:8888/api/private/v1/'
// 设置请求头拦截
axios.interceptors.request.use(config => {
  config.headers.Authorization = window.sessionStorage.getItem('token');
  console.log(config);
  // 在最后必须 return config
  return config
})
// 把axios挂到Vue实例对象上
Vue.prototype.$http = axios

经过以上设置则可以通过 this.$http发送axios请求后端接口

2.发送各类请求携带参数的格式：

（1）get请求

const { data: res } = await this.$http.get(`categories/${this.cateId}/attributes`,
        { params: { sel: this.activeName } }
      );
// 若要求参数携带在url中 可以通过 `` 包裹后端地址，使用${}在url中携带对应参数
// 不携带在url的参数需要通过 params传递参数
// 若参数不携带在url中，且参数很多，可以把接口所需参数打包成一个对象，通过params把由各个参数组成的对象直接传给后端接口

（2）post请求