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

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

1、在完结下面的过程之前，先脚手架创立vue项目，然后再vue项目傍边，首先先创立一个文件夹utils，里边放request.js的文件
(1)下载 npm i axios先下载好axios恳求依赖
(2)下面的这个文件，包括封装恳求，以及拦截器，还有设置了恳求头（里边的代码需求依据自己个人需求修正）

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恳求以及传参啥的（仅供参阅，能够参阅下面代码，依据自己需求修正）

首先导入刚刚封装好的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组件傍边，导入咱们刚刚写好的封装（仅供参阅，能够参阅下面代码，依据自己需求修正）

import {setToolList} from '@/api/shopping'
1

第二步：导入完结之后，在script里边编写恳求代码，能够写在methods让按钮调用数据，也能够写在created()里边，在这里我写在methods里边，然后让created调用数据

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

第三：完好恳求数据代码：

<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

完结以上过程就能恳求到数据啦，假如恳求不到数据，能够随时留言哦宝宝

欢迎重视”所谓前端“微信公众号,我们一同沟通
点击扫码重视