vue axios

最新推荐文章于 2024-12-04 07:15:00 发布

zwhfyy

最新推荐文章于 2024-12-04 07:15:00 发布

阅读量133

点赞数

分类专栏： axios

本文链接：https://blog.youkuaiyun.com/zwhfyy/article/details/109464774

版权

axios 专栏收录该内容

0 篇文章

订阅专栏

本文介绍Vue.js中的数据加载过程，特别是在created生命周期阶段使用axios进行异步数据获取的方法。此外，还探讨了如何组织多个API请求及使用拦截器来增强请求与响应流程。

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

// created:vue生命周期中的钩子函数，在这个时间点，data中的数据已经注入到响应式系统中
created(){
    axios.get('api/getData.php',{       // 还可以直接把参数拼接在url后边
        params:{
            title:'眼镜'
        }
    }).then(function(res){
        this.goodsList = res.data;
    }).catch(function (error) {
        console.log(error);
    });
}


//获得用户信息的请求
function getUserAccount() {
     return axios.get('/user/12345');
}
 
//获取用户许可证的请求
function getUserPermissions() {
     return axios.get('/user/12345/permissions');
}
 
axios.all( [ getUserAccount(),  getUserPermissions() ] )
    .then(axios.spread(function (acct, perms) {
        //两个请求现已完成
    })
);


//请求拦截器
axios.interceptors.request.use(
  function (config) {
      // 在发送请求之前做些什么
      return config;
  },
  function (error) {
      // 对请求错误做些什么
      return Promise.reject(error);
  }
);

//响应拦截器
axios.interceptors.response.use(
  function (config) {
      // 对响应数据做点什么
      return config;
  },
  function (error) {
      // 对响应错误做点什么
      return Promise.reject(error);
  }
);