Vue从零开始之axios

最新推荐文章于 2023-12-29 18:19:14 发布

课本里的小亮

最新推荐文章于 2023-12-29 18:19:14 发布

阅读量199

点赞数

分类专栏： Vue 文章标签： vue axios 前端前端Vue axios交互

本文链接：https://blog.youkuaiyun.com/lixiaolian123/article/details/107239104

版权

本文介绍了如何在Vue项目中使用Axios进行网络请求。从安装Axios开始，详细讲解了Axios的不同请求方式，包括get、post等，并展示了如何设置全局配置和创建多个实例以应对不同需求。此外，还探讨了Axios的模块封装，包括回调函数、Promise和原生方式的使用，最后提到了Axios拦截器的应用，如何在请求和响应前后处理信息。

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

Axios网络请求

jQuer有1w+行代码,vue的代码也才1w+行.我们只为进行网络请求就引入jQuery得不偿失.

安装Axios

npm安装

npm install axios --save --registry=https://registry.npm.taobao.org

main.js中引用Axios

import axios from 'axios'
/*使用原型链,为Vue实例添加axios对象*/
Vue.prototype.axios = axios;
// 或直接使用导入的 axios 实例

axiox请求方式

axios(config)
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

get请求简单使用

进行异步请求,要在组件内路由钩子的beforeRouteEnter中发送异步请求

  export default {
    props: ['id'],
    name: "UserProfile",
    beforeRouteEnter: (to, from, next) => {
      console.log("准备进入个人信息页");
      // 注意，一定要在 next 中请求，因为该方法调用时 Vue 实例还没有创建，此时无法获取到 this 对象，
     //在这里使用官方提供的回调函数拿到当前实例,再调用方法
      next(vm => {
        vm.getData();
      });
    },
    methods: {
      getData: function () {
        this.axios({
          method: 'get',

最低0.47元/天解锁文章