vue中axios封装api请求方式

最新推荐文章于 2024-08-17 22:12:47 发布

小杜～

最新推荐文章于 2024-08-17 22:12:47 发布

阅读量304

点赞数

分类专栏： vue.js axios 封装文章标签： vue

本文链接：https://blog.csdn.net/D2073307388/article/details/108955073

版权

vue.js 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

axios

1 篇文章 0 订阅

订阅专栏

封装

1 篇文章 0 订阅

订阅专栏

本文档详细介绍了如何在前端项目中封装axios HTTP请求，包括环境变量判断、请求和响应拦截器的设置，以及get和post请求的实现。同时展示了在组件中如何调用这些接口，以及在main.js中挂载到Vue原型上使用的方法，帮助开发者理解并应用HTTP请求封装。

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

简单粗暴上代码上注释 (看不懂算我输系列第一期)

在src目录下新建api文件夹和http文件夹,里面放上相应的JS结尾的文件

//http.js    存放封装逻辑，和请求拦截器、响应拦截器
import axios from "axios"
if(process.env.NODE_ENV === "development"){
					//测试环境和上线环境网址前半部分相同地方
  axios.defaults.baseURL = "http://120.53.31.103:84";
}else if(process.env.NODE_ENV === "production"){
  axios.defaults.baseURL = 'http://wap.365msmk.com';
}
//设置超时时间
axios.defaults.timeout = 10000;
//请求拦截
axios.interceptors.request.use(config =>{
					//判断PC或手机或者小程序 ***只是演示***
  config.headers = { DeviceType: 'H5'}//响应头参数
  return config
})
// 响应拦截
axios.interceptors.response.use(response=>{
     return response.data //拦截处理相应结果,直接返回需要的数据
 }),err=>{
     console.log(err)
 }
//promise拼接路径  get  post请求方式 亦或是其他请求方式
export function get(url,params){
  return new Promise((resolve,reject)=>{
    axios.get(url,{
      params: params
    }).then(res=>{
      resolve(res)
    }).catch(err=>{
      reject(err)
    })
  })
}
//这里踩坑post和get请求拼接的方式不一样
export function post(url,params){
  return new Promise((resolve,reject)=>{
      axios.post(url,params)
      .then(res=>{
          resolve(res)
      })
      .catch(error=>{
          reject(error)
      })
  })
}

api部分

//api部分   存放项目中所有请求接口的url和请求方式
//引入之前写好的http
import { get, post } from "../http/http.js";
//配置后半截请求地址 逐一抛出
//首页名师部分
export function GetApp() {
    return get("/api/app/recommend/appIndex")
}
//请求地址后半截
export function GetAppBanner() {
    return post("/api/app/banner")
}

//页面请求部分
async mounted() {
    //轮播图
    let res = await GetAppBanner();
    this.banner = res.data.data;
    // console.log(this.banner)
    //名师阵容 精品课程 等
    res = await GetApp();
    this.list = res.data.data;
    console.log(this.list);
  },

请求时一定要注意请求方式,否则会报object的错误,根据错误去找到相应的位置即可

除了封装后直接在页面引入http.js之外还有一种方式就是将http挂载在Vue的原型上,即在main.js里面写入
Vue.prototype.$Http = Http

methods: {
    async onDelete(info){
        let res = await this.$Http.delContact(
            {
                id:info.id
            }
        )
        if(res.code === 200){
            Toast('删除成功')
            this.getList()
        }
    }
}