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

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 

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     }   }) }  

3、完成全部封装之后，需要搞定的是在我们的vue组件请求数据
第一步：在自己的vue组件当中，导入我们刚刚写好的封装（仅供参考，可以参考下面代码，根据自己需求修改）

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

第二步：导入完成之后，在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()   } 

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

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