vue中axios的使用

最新推荐文章于 2024-10-05 01:22:45 发布

WeChat624

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量123

点赞数

文章标签： vue.js javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_71879136/article/details/129110837

版权

文章讲述了在Vue项目中如何安装和使用axios库。首先，通过npm安装axios，然后在main.js中全局引入并挂载到Vue实例上。接着，展示了如何设置请求和响应拦截器以处理请求前后的逻辑。此外，还介绍了如何封装axios实例并导出，以便在其他组件中调用预定义的请求方法，例如获取热门新闻列表。最后，文章提到了在组件中调用这些封装好的请求函数来执行登录操作，并处理响应数据。

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

一、

1.首先npm i axios -s 安装

2.在main.js中导入axios

//引入axios
import axios from "axios"
//挂载在vue上面
Vue.prototype.$axios = axios

3.在created中使用：

this.$axios.get(this.url + '/pc/course/detail/'+this.$router.currentRoute.query.id).then(res=>{
      // console.log(res.data.data)
      this.coverFileUrl = res.data.data.coverFileUrl
    })

二、

首先npm i axios -s 安装

在新建文件夹中创建两个js

import axios from 'axios'

// 使用自定义的配置文件发送请求
const instance = axios.create({
    baseURL: '',
    timeout: 5000,
    headers: {
    }
});
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么

    return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    instance// 对响应数据做点什么
    if(response.status === 200){
        return response;
    }else{
        console.error("请求错误")
        console.error(response)
    }
    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

export default instance

c.在请求js文件中，如：

import http from './axios'
//获取热门新闻列表
function getHotNews(pageNum=1,pageSize=15){
    let form=new URLSearchParams()
    form.append('pageNum',pageNum)
    form.append('pageSize',pageSize)
    return http.post('/api/api/cms/article/open/hot/list',form)
}

d.在请求中组件中导入封装好的请求函数。如：

import {login} from "@/http/api";

methods{
    login(this.username,this.password).then(res=>{
        if(res.data.code==500){
          //登陆失败通知

          Notify('用户不存在/密码错误');
        }else {
          // 成功通知
          Notify({ type: 'success', message: '登陆成功' });
          this.$router.push('/mine')
          // this.$router.go(-1)
          this.$store.commit('change3',{userinfo:res.data})
        }
      })
}