关于axios: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.status===0){resolve(res.data);
            }else{alert(res.data.msg)
            }
        }).catch(error=>{alert('网络异样');
        })
    })
}

export const post = (url,params)=>{params = params || {};
    return new Promise((resolve,reject)=>{$http.post(url,params).then(res=>{if(res.data.status===0){resolve(res.data);
            }else{alert(res.data.msg);
            }
        }).catch(error=>{alert('网络异样');
        })
    })
}

这里用到了的知识点
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() {
        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 数据} 不然会报错，因为没有实现异步转同步