vue 和 axios

vue 和 axios

Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。

特性

• 從瀏覽器中創建 XMLHttpRequests
• 從 node.js 創建 http 請求
• 支持 Promise API
• 攔截請求和響應
• 轉換請求數據和響應數據
• 取消請求
• 自動轉換 JSON 數據
• 客戶端支持防禦 XSRF

demo 練習

目錄結構 

src
--networkAxios
----axios_instance.js
----home.js

src/networkAxios/axios_instance.js 文件內容

// axios 封裝............
import Axios from 'axios'
// import Qs from 'qs'

// qs 對請求的參數進行序列化
export default function axios_instance(option) {
    return new Promise((resolve, reject) => {
        // 創建 axios 實例
        const instance = Axios.create({
            baseURL: 'http://demo.yizheng_fei.com/api',
            // baseURL: 'https://gank.io/api',
            timeout: 300000,
            headers:{
                'Content-Type': 'application/x-www-form-urlencoded',
            },
        });

        // 配置請求
        instance.interceptors.request.use(config => {
            // 判斷token,用於登錄
            // 請求數據序列號
            // config.data = Qs.stringify(config.data)
            return config;
        }, error => {
            // 網絡請求失敗
            return error;
        });

        // 配置響應攔截
        instance.interceptors.response.use(response => {
            return response.data;
        }, error => {
            if (error && error.response) {
                switch (error.response.status) {
                    case 400:
                        error.message = '請求錯誤';
                        break;
                    case 401:
                        error.message = '未授權的訪問';
                        break;
                    case 403:
                        error.message = '沒有權限';
                        break;
                    case 500:
                    case 501:
                    case 503:
                    default:
                        error.message = '服務器出問題';
                        break;
                }
            }
            return error;
        });

        // 傳入對象進行網絡訪問
        instance(option).then(res => {
            resolve(res);
        }).catch(error => {
            reject(error)
        });
    });
}

 src/networkAxios/home.js 文件內容

import axios_instance from './axios_instance'

export function getWeatherData() {
    return axios_instance({
        url: '/user/detail?id=3'
        // url: '/v2/categories/GanHuo'
    })
}

 src/views/Home.vue 文件內容

<template>
    <div id="home">
        <div>我是home <input type="button" value="點擊請求數據" @click="fetch_data()">點擊請求數據</div>
    </div>
</template>

<script>
    import {getWeatherData} from "../networkAxios/home"

    export default {
        name: "Home",
        methods:{
            fetch_data() {
                getWeatherData().then(res=>{
                    console.log(res.data);
                })
            }
        }
    }
</script>

<style scoped>

</style>