vue使用axios封装请求数据,教会你封装,简单易懂,轻松学会axios封装请求数据 看一眼就会 手把手教会

前端vue2中axios封装请求数据,教会你封装教会你请求数据 简单易懂,轻松学会axios封装请求数据 看一眼就会 手把手教会

1、在完成下面的步骤之前,先脚手架创建vue项目,然后再vue项目当中,首先先创建一个文件夹utils,里面放request.js的文件

(1)下载 npm i axios先下载好axios请求依赖

(2)下面的这个文件,包括封装请求,以及拦截器,还有设置了请求头(里面的代码需要根据自己个人需求修改)

javascript 复制代码
import axios from "axios";

// 封装axios构造函数请求 
// 1.先是自定义一个方法名
// 2.然后获取头部token值
// 3.延长器设不设置都可以
const instance = axios.create({
  baseURL: 'http://localhost:8081/wx',
  headers: {
    // X-Litemall-Token这个名称就固定这个
    'X-Litemall-Token' : localStorage.getItem("X-Litemall-Token")
  }
})
  
// 请求拦截器
// 1.请求拦截器,在发请求之前,请求拦截器可以检测到发起请求之前需要做什么事情,把需要做的事情,放在请求拦截器之前
axios.interceptors.request.use(config => {
  // 1.这里我设置了,在请求之前,先开始进度条的动画
  // 2.返回请求数据
  if(localStorage.setItem['X-Litemall-Token'] !== null ) {
    console.headers.common['X-Litemall-Token'] = localStorage.getItem('X-Litemall-Token')
  }
  return config
 
})
// 响应拦截器
// 1.相应上面的请求拦截器的需求
// 2.把上面的请求拦截器的需求全部做到
axios.interceptors.response.use(res => {
  return res.data
}, error => {
  return Promise.reject(new Error('faile'))
})

// 对外暴露前面创建的构造方法
export default instance
123456789101112131415161718192021222324252627282930313233343536

2、完成上面的步骤还不够,还需要再创建一个文件夹api,然后在文件夹里面创建自定义的文件名(我创建的是cartApi.js)文件名根据自己的需求命名

下面就是根据自己的请求接口以及数据参数请求,下面的请求是一些常见的post、get请求以及传参啥的(仅供参考,可以参考下面代码,根据自己需求修改)

javascript 复制代码
首先导入刚刚封装好的request.js文件  路径存储根据自己修改
import request from '@/utils/request' 

//地区列表
export function GeteGionList() {
  return request({
   method:'GEt',
   url:'/region/list'
  })
}

//添加收货地址
export function setShippingAddress(data) {
  return request({
   method:'POST',
   url:"/address/setShippingAddress",
   data: data
  })
}

//设置默认地址
export function Altedstate(id) {
   return request({
      method:'GET',
      url:'/address/default',
      params: {
        id:id
      }
      
   })
}

//获取订单列表 
export function GetOrder(pages,id) {
  return request({
    method:'get',
    params: {
        page:pages.page,
        limit:pages.limit,
        id:id,
    },
    url:`/order/list`,
  })
}

//添加订单 
export function PostAddorder(data) {
  return request({
    data:data,
    method:'POST',
    url:'/order/goods',
  })
}

//添加商品收藏
export function PostAddinsert(id) {
  return request({
    method:'GET',
    url:`/collect/insert?id=${id} `,
  })
}
// 获取收藏
export function Getcollect() {
  return request({
    method:'GET',
    url:`/collect/list`,
  })
}
// 删除收藏
export function Deletdcollect(arr) {
  return request({
    method:'post',
    data: {
      id:arr
    },
    url:`/collect/delete`,
  })
}

//获取商品足迹
export function Getfootprint() {
  return request({
    method:'get',
    url:`/footprint/select`,
  })
}

// 获取首页的左边工具栏
// http://localhost:8081/wx/catalog/list?page=1&limit=11
export function setToolList () {
  return request.get('/catalog/list', {
    params: {
      page: 1,
      limit: 20
    }
  })
}

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798

3、完成全部封装之后,需要搞定的是在我们的vue组件请求数据

第一步:在自己的vue组件当中,导入我们刚刚写好的封装(仅供参考,可以参考下面代码,根据自己需求修改)

javascript 复制代码
import {setToolList} from '@/api/shopping'
1

第二步:导入完成之后,在script里面编写请求代码,可以写在methods让按钮调用数据,也可以写在created()里面,在这里我写在methods里面,然后让created调用数据

javascript 复制代码
methods: {
    // 工具栏的请求
    async getToolList()  {
      await setToolList().then(res => {
        this.toolList = res.data.data.list
        console.log(this.toolList)
      })
    }
  },
  created() {
    this.getToolList()
  }
123456789101112

第三:完整请求数据代码:

javascript 复制代码
<template>
  <div>
    {{ toolList }}
  </div>
</template>

<script>
import {setToolList} from '@/api/shopping'

export default {
  data() {
    return {
      toolList: [],

    }
  },
  methods: {
    // 工具栏的请求
    async getToolList()  {
      await setToolList().then(res => {
        this.toolList = res.data.data.list
        console.log(this.toolList)
      })
    }
  },
  created() {
    this.getToolList()

  }
}
</script>

<style lang="scss" scope>


</style>
123456789101112131415161718192021222324252627282930313233343536

完成以上步骤就能请求到数据啦,如果请求不到数据,可以随时留言哦宝宝

欢迎关注"所谓前端 "微信公众号,大家一起交流 点击扫码关注

相关推荐
zhougl9969 分钟前
html处理Base文件流
linux·前端·html
花花鱼12 分钟前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_15 分钟前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo2 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之3 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端3 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡3 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木4 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!5 小时前
优选算法系列(5.位运算)
java·前端·c++·算法
難釋懷5 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript