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 数据} 不然会报错,因为没有实现异步转同步