axios 簡單封裝

參考文檔：https://www.cnblogs.com/deng-jie/p/12420873.html

                   https://juejin.cn/post/6844903652881072141

創建一個http.js文件

import axios from "axios"
import { Toast } from 'vant';

// 環境的切換
if (process.env.NODE_ENV == 'development') {
    axios.defaults.baseURL = 'https://uniapp-toutiao.herokuapp.com/';
} else if (process.env.NODE_ENV == 'debug') {
    axios.defaults.baseURL = 'https://uniapp-toutiao.herokuapp.com/';
} else if (process.env.NODE_ENV == 'production') {
    axios.defaults.baseURL = 'https://uniapp-toutiao.herokuapp.com/';
}
// 請求超時時間
axios.defaults.timeout = 2000
//post請求頭   application/json;charset=UTF-8
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

// 請求攔截器
axios.interceptors.request.use(function (config) {
    // 請求的時候加個toke，存在就加上
    let token = window.localStorage.getItem("token")
    if (token) {
        config.headers.token = token
        //也可以這種寫法
        // config.headers['token'] = token;
    }
    Toast.loading({
        message: '請求中...',
        forbidClick: true,
        duration: 0,
    });
    return config;
}, function (error) {
    // Do something with request error
    Toast.fail('請求失敗!');

    return Promise.reject(error);
});

// 響應攔截器
axios.interceptors.response.use(function (response) {
    //判斷下相應過來的狀態碼,這里根據后端怎么寫響應碼有關
    Toast.clear();

    return response;
}, function (error) {
    //判斷響應錯誤碼
    // if (error.response.status) {
    //     switch (error.response.status) {
    //         case 401:
    //             console.log(401)
    //             break
    //         case 403:
    //             console.log(403)
    //             break
    //         case 404:
    //             console.log(404)
    //             break
    //         default:
    //             Toast({
    //                 message: '默認響應錯誤碼',
    //                 duration: 1500,
    //                 forbidClick: true
    //             });


    //     }
    // }
    Toast.fail("服務器連接失敗");
    return Promise.reject(error);
});

//通用方法
export const GET = (url, params) => {
    return axios.get(url, params)
}
export const POST = (url, params) => {
    return axios.post(url, { params: params }).then(
        res => {
            console.log(res.data)
        }
    )
}

在main.js中引入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Vant from 'vant';
import 'vant/lib/index.css';
import "./http"
import { GET, POST } from './http';

Vue.prototype.postRequest  = POST
Vue.prototype.getRequest  = GET


Vue.use(Vant);
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

使用案例

<template>
  <div>
    <van-button @click="jay" type="primary">主要按鈕</van-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: "https://uniapp-toutiao.herokuapp.com/api/profiles/home_tab_list",
      url2:"api/profiles/home_tab_list"
    };
  },
  methods: {
    jay() {

 
      this.getRequest(this.url2).then(
       res=>{
        console.log(res.data);
       }
      )

    },
  },
};
</script>

<style lang="scss" scoped>
</style>