vue2使用axios封装请求数据，教会你封装，简单易懂，轻松学会axios封装请求 ...

1. import axios from "axios";
3. // 封装axios构造函数请求
4. // 1.先是自定义一个方法名
5. // 2.然后获取头部token值
6. // 3.延长器设不设置都可以
7. const instance = axios.create({
8.   baseURL: 'http://localhost:8081/wx',
9.   headers: {
10.     // X-Litemall-Token这个名称就固定这个
11.     'X-Litemall-Token' : localStorage.getItem("X-Litemall-Token")
12.   }
13. })
14.   
15. // 请求拦截器
16. // 1.请求拦截器，在发请求之前，请求拦截器可以检测到发起请求之前需要做什么事情，把需要做的事情，放在请求拦截器之前
17. axios.interceptors.request.use(config => {
18.   // 1.这里我设置了，在请求之前，先开始进度条的动画
19.   // 2.返回请求数据
20.   if(localStorage.setItem['X-Litemall-Token'] !== null ) {
21.     console.headers.common['X-Litemall-Token'] = localStorage.getItem('X-Litemall-Token')
22.   }
23.   return config
25. })
26. // 响应拦截器
27. // 1.相应上面的请求拦截器的需求
28. // 2.把上面的请求拦截器的需求全部做到
29. axios.interceptors.response.use(res => {
30.   return res.data
31. }, error => {
32.   return Promise.reject(new Error('faile'))
33. })
35. // 对外暴露前面创建的构造方法
36. export default instance

复制代码

2、完成上面的步骤还不够，还需要再创建一个文件夹api，然后在文件夹内里创建自定义的文件名（我创建的是cartApi.js）文件名根据自己的需求命名
下面就是根据自己的请求接口以及数据参数请求，下面的请求是一些常见的post、get请求以及传参啥的（仅供参考，可以参考下面代码，根据自己需求修改）

1. 首先导入刚刚封装好的request.js文件  路径存储根据自己修改
2. import request from '@/utils/request'
4. //地区列表
5. export function GeteGionList() {
6.   return request({
7.    method:'GEt',
8.    url:'/region/list'
9.   })
10. }
12. //添加收货地址
13. export function setShippingAddress(data) {
14.   return request({
15.    method:'POST',
16.    url:"/address/setShippingAddress",
17.    data: data
18.   })
19. }
21. //设置默认地址
22. export function Altedstate(id) {
23.    return request({
24.       method:'GET',
25.       url:'/address/default',
26.       params: {
27.         id:id
28.       }
29.       
30.    })
31. }
33. //获取订单列表
34. export function GetOrder(pages,id) {
35.   return request({
36.     method:'get',
37.     params: {
38.         page:pages.page,
39.         limit:pages.limit,
40.         id:id,
41.     },
42.     url:`/order/list`,
43.   })
44. }
46. //添加订单
47. export function PostAddorder(data) {
48.   return request({
49.     data:data,
50.     method:'POST',
51.     url:'/order/goods',
52.   })
53. }
55. //添加商品收藏
56. export function PostAddinsert(id) {
57.   return request({
58.     method:'GET',
59.     url:`/collect/insert?id=${id} `,
60.   })
61. }
62. // 获取收藏
63. export function Getcollect() {
64.   return request({
65.     method:'GET',
66.     url:`/collect/list`,
67.   })
68. }
69. // 删除收藏
70. export function Deletdcollect(arr) {
71.   return request({
72.     method:'post',
73.     data: {
74.       id:arr
75.     },
76.     url:`/collect/delete`,
77.   })
78. }
80. //获取商品足迹
81. export function Getfootprint() {
82.   return request({
83.     method:'get',
84.     url:`/footprint/select`,
85.   })
86. }
88. // 获取首页的左边工具栏
89. // http://localhost:8081/wx/catalog/list?page=1&limit=11
90. export function setToolList () {
91.   return request.get('/catalog/list', {
92.     params: {
93.       page: 1,
94.       limit: 20
95.     }
96.   })
97. }

复制代码

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

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

复制代码

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

1. methods: {
2.     // 工具栏的请求
3.     async getToolList()  {
4.       await setToolList().then(res => {
5.         this.toolList = res.data.data.list
6.         console.log(this.toolList)
7.       })
8.     }
9.   },
10.   created() {
11.     this.getToolList()
12.   }

复制代码

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

1. <template>  <div>    {{ toolList }}  </div></template><script>import {setToolList} from '@/api/shopping'
2. export default {  data() {    return {      toolList: [],    }  },  methods: {
3.     // 工具栏的请求
4.     async getToolList()  {
5.       await setToolList().then(res => {
6.         this.toolList = res.data.data.list
7.         console.log(this.toolList)
8.       })
9.     }
10.   },
11.   created() {
12.     this.getToolList()
13.   }
14. }</script><style lang="scss" scope></style>

复制代码

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。