promise封裝axios方法

axios

• 獲取後臺數據的方法插件

promise

• 處理異步的方法

封裝

• 在實際項目裏爲了更方便的使用axios獲取後臺數據，這裏咱們用promise封裝一下
  vue項目裏封裝方法咱們通常放在utils文件夾裏
  src下新建一個utils文件夾，index.js文件

/* eslint-disable no-unused-vars */
import axios from 'axios';

// const get = () => {
//     console.log('get請求');
// }

// const post = () => {
//     console.log('post請求')
// }

// export{
//     get,
//     post
// }

// process.env.NODE_ENV環境
let baseURL;
if(process.env.NODE_ENV=='development'){
    baseURL = 'http://192.168.3.40/xxx'
}else{
    baseURL = 'http://47.114.48.244/xxx'
}

或者簡寫: 

baseURL = process.env.VUE_APP_BASE_API;

// baseURL es6 方法

const $http = axios.create({
    baseURL,
})
// create 是axios自帶的方法

export const get = (url,params)=>{
    params = params || {};
    return new Promise((resolve,reject)=>{
        // axiso 自帶 get 和 post 方法
        $http.get(url,{
            params,
        }).then(res=>{
            if(res.data.code===0){
                resolve(res.data);
            }else{
                alert(res.data.msg)
            }
        }).catch(error=>{
        // 這裏也須要捕獲異常 例如: 經過請求獲取的數據res.data須要JSON.parse解析 若是解析報錯錯誤 則只能在.catch中捕獲 而在try/catch中沒法捕獲 或者 請求響應過程產生的報錯 在 .catch 中捕獲
            console.log(error);
        })
    })
}

export const post = (url,params)=>{
    params = params || {};
    return new Promise((resolve,reject)=>{
        $http.post(url,params).then(res=>{
            if(res.data.code===0){
                resolve(res.data);
            }else{
                alert(res.data.msg);
            }
        }).catch(error=>{
            console.log(error);
        })
    })
}

這裏用到了的知識點
1.baseURL
2.axios的create方法
3.promise以及axios的get和post

main.js方面

import { get, post } from "./utils/index";
Vue.prototype.$http = {
  get,
  post
};

1.這裏使用了構造函數的原型prototype(vue屬於構造函數)
2.聲明一個全局變量而且把封裝好的get和post方法放在裏面
使用封裝後的函數

created() {
    this.getFilmList();
  },
methods: {
    async getFilmList() {
    // 完美寫法: utils內封裝的方法要寫.catch來捕獲請求相應過程當中產生的異常錯誤 而且 還須要經過async/await的try/catch捕獲try裏面代碼的異常錯誤 例如: 調用的this.$http.get方法不存在 或者 這裏獲得的數據res須要JSON.parse()而產生報錯 都在catch中捕獲
        try{
              const url = "/film/getList";
                 // 要訪問第二頁的話在網址後面加 ?type=2&pageNum=頁數
                 const res = await this.$http.get(url);
                 this.filmList = res.films;
         } catch(error) {
                console.log(error);
         }
},

這裏注意的是，由於是promise封裝的函數方法，因此使用的時候要加上
async 函數(){ await 數據} 否則會報錯，由於沒有完成異步轉同步