使用axios獲取后端資料和使用mockjs-有解無憂

一、使用axios獲取后端資料并使用

1.對axios進行封裝 network/request.js

在這里插入圖片描述

import axios from 'axios'
import nprogress from 'nprogress'//引入進度條
import "nprogress/nprogress.css"
const requests = axios.create({
    baseURL:'/api',
    timeout:5000
});
//請求攔截
requests.interceptors.request.use((config)=>{
    nprogress.start()//進度條開始
    return config;
})
//回應攔截
requests.interceptors.response.use((res)=>{
    nprogress.done()//進度條結束
    return res.data;
},(err)=>{

});
export default requests;

對api進行統一管理 network/index.js

在這里插入圖片描述

//對API進行統一管理
import requests from './request';
import mockrequest from './mockrequest'
//下面是三級聯動導航欄介面
export const getCategoryList = () => requests({url:'/product/getBaseCategoryList',method:'get'});
//獲取首頁輪播圖的介面
export const swiper = () => mockrequest({url:'/swiper',method:'get'});

2.在要獲取的資料頁面通過dispatch訪問倉庫里面actions（actions里面可以處理異步，向服務器發送請求）

mounted() {
    this.$store.dispatch("getSwiperList"); 
    //通過dispatch訪問倉庫store中actions里面的東西,即發送請求
    }

在這里插入圖片描述

3.在倉庫store里面的actions里面匯入network里需要的模塊，在actions里面處理獲取服務器回傳的資料的業務邏輯，
store/index.js

 async categoryList({commit}){
        //通過api里面的介面函式呼叫，向服務器發送請求，獲取服務器的資料，把資料傳給mutations，在mutations里面修改state
        let result = await getCategoryList();
        if(result.code==200){
            commit('CATEGORYLIST',result.data)
        }
    },

在這里插入圖片描述

4.在mutations中修改state中的資料

CATEGORYLIST(state,categoryList){
        state.categoryList = categoryList
    },

在這里插入圖片描述

5.從倉庫拿資料

import {mapState} from 'vuex';
computed:{
        ...mapState({
            swiperList:(state)=>{
                console.log(state)
                return state.swiper
            }
        })
    }

在這里插入圖片描述

6.然后就可以使用啦！

二、使用Mock.js
1.先用npm安裝mockjs
2.準備好json格式的資料
在這里插入圖片描述
3.引入mock,模擬資料；把json資料格式引入進來

在入口檔案main.js中執行

4.在network中封裝mock的請求

5.剩下的就和使用axios一樣的步驟，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/402760.html

標籤：其他

上一篇：educoder答案-JavaScript物件編程合集

下一篇：走進前端——HTML(2)