前端開發：axios在項目中的應用

用到的模塊：

Vue: https://cn.vuejs.org/v2/guide/
Axios: http://www.axios-js.com/zh-cn/docs/
vant: https://youzan.github.io/vant/#/zh-CN/intro

可參考文章

1. 前端開發：axios在vue中的使用
2. 前端開發：vant在vue中的使用

一、接口配置

server/contactApi.js

// 統一接口管理
const CONTACT_API = {
    // 獲取聯繫人列表
    getContactList: {
        method: "get",
        url: "/contactList.json"
    }
}


export default CONTACT_API

二、配置全局的Http請求函數

server/http.js

import axios from "axios";
import contactApi from "./contactApi"
import {Toast} from "vant"

let instance = axios.create({
    baseURL: "/",
    timeout: 1000 // 毫秒
})

// 包裝請求方法的容器
const Http = {}

for(let key in contactApi){
    let api = contactApi[key]
    
    // async 做用，避免進入回調地獄
    Http[key] = async function(data){
        let response = {};
        try{
            response = await instance[api.method](api.url, {params: data})
        }catch(err){
            response = err;
        }
        return response;
    }
}

// 請求攔截器
instance.interceptors.request.use(
    config => {
        Toast.loading({
            mask: false,
            duration: 0,  // 一直存在
            forbidClick: true, // 禁止點擊
            message: "加載中..."
        })
        return config;
    },()=>{
        Toast.clear()
        Toast("請求出錯")
    }
)

// 添加響應攔截器
instance.interceptors.response.use(
    res => {
        Toast.clear()
        return res.data;
    },()=>{
        Toast.clear()
        Toast("請求出錯")
    }
)

export default Http

三、全局掛載

main.js

// 把Http掛在到vue實例上，全局可用
Vue.prototype.$Http = Http

四、視圖中調用http

views/VantIndex.vue

<template>
  <div>
    <!-- 聯繫人列表 -->
    <van-contact-list :list="list" />
    
  </div>
</template>

<script> // 引入組件 import { ContactList } from "vant"; export default { name: "vantIndex", data() { return { list: [] }; }, // 註冊組件 components: { [ContactList.name]: ContactList }, methods: { async getContactList() { let res = await this.$Http.getContactList({ name: "Tom" }); this.list = res.data; } }, // mounted creared creared() { this.getContactList(); } }; </script>

五、修改路由

router.js

routes: [
      {
        path: '/',
        name: 'index',
        component: () => import('./views/VantIndex.vue')
    }
  ]

六、測試數據 public/contactList.json

{
    "code": 200,
    "data": [
        {
            "name": "張三",
            "tel": "13000000000",
            "id": 1
        },
        {
            "name": "李四",
            "tel": "13000000001",
            "id": 2
        },
        {
            "name": "王五",
            "tel": "13000000002",
            "id": 3
        }
    ]
}

啓動服務訪問測試

npm run serve

http://localhost:8080/