import axios from "axios";

// 封裝axios構(gòu)造函數(shù)請求 
// 1.先是自定義一個(gè)方法名
// 2.然后獲取頭部token值
// 3.延長器設(shè)不設(shè)置都可以
const instance = axios.create({
  baseURL: 'http://localhost:8081/wx',
  headers: {
    // X-Litemall-Token這個(gè)名稱就固定這個(gè)
    'X-Litemall-Token' : localStorage.getItem("X-Litemall-Token")
  }
})
  
// 請求攔截器
// 1.請求攔截器，在發(fā)請求之前，請求攔截器可以檢測到發(fā)起請求之前需要做什么事情，把需要做的事情，放在請求攔截器之前
axios.interceptors.request.use(config => {
  // 1.這里我設(shè)置了，在請求之前，先開始進(jìn)度條的動(dòng)畫
  // 2.返回請求數(shù)據(jù)
  if(localStorage.setItem['X-Litemall-Token'] !== null ) {
    console.headers.common['X-Litemall-Token'] = localStorage.getItem('X-Litemall-Token')
  }
  return config
 
})
// 響應(yīng)攔截器
// 1.相應(yīng)上面的請求攔截器的需求
// 2.把上面的請求攔截器的需求全部做到
axios.interceptors.response.use(res => {
  return res.data
}, error => {
  return Promise.reject(new Error('faile'))
})

// 對(duì)外暴露前面創(chuàng)建的構(gòu)造方法
export default instance

2、完成上面的步驟還不夠，還需要再創(chuàng)建一個(gè)文件夾api，然后在文件夾里面創(chuàng)建自定義的文件名（我創(chuàng)建的是cartApi.js）文件名根據(jù)自己的需求命名
下面就是根據(jù)自己的請求接口以及數(shù)據(jù)參數(shù)請求，下面的請求是一些常見的post、get請求以及傳參啥的（僅供參考，可以參考下面代碼，根據(jù)自己需求修改）

首先導(dǎo)入剛剛封裝好的request.js文件  路徑存儲(chǔ)根據(jù)自己修改
import request from '@/utils/request' 

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

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

//設(shè)置默認(rèn)地址
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組件請求數(shù)據(jù)
第一步：在自己的vue組件當(dāng)中，導(dǎo)入我們剛剛寫好的封裝（僅供參考，可以參考下面代碼，根據(jù)自己需求修改）

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

第二步：導(dǎo)入完成之后，在script里面編寫請求代碼，可以寫在methods讓按鈕調(diào)用數(shù)據(jù)，也可以寫在created()里面，在這里我寫在methods里面，然后讓created調(diào)用數(shù)據(jù)

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

第三：完整請求數(shù)據(jù)代碼：

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

完成以上步驟就能請求到數(shù)據(jù)啦，如果請求不到數(shù)據(jù)，可以隨時(shí)留言哦寶寶文章來源地址http://www.zghlxwxcb.cn/news/detail-779712.html

到了這里，關(guān)于前端vue2中axios封裝請求數(shù)據(jù)，教會(huì)你封裝教會(huì)你請求數(shù)據(jù) 簡單易懂，輕松學(xué)會(huì)axios封裝請求數(shù)據(jù) 看一眼就會(huì) 手把手教會(huì)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！