axios

  • 获取后台数据的方法插件

    promise

  • 处理异步的方法

    封装

  • 在实际项目里为了更方便的使用axios获取后台数据，这里我们用promise封装一下
    vue项目里封装方法我们一般放在utils文件夹里
    src下新建一个utils文件夹，index.js文件

    1. /* eslint-disable no-unused-vars */
    2. import axios from 'axios';
    3. // const get = () => {
    4. //     console.log('get请求');
    5. // }
    6. // const post = () => {
    7. //     console.log('post请求')
    8. // }
    9. // export{
    10. //     get,
    11. //     post
    12. // }
    13. // process.env.NODE_ENV环境
    14. let baseURL;
    15. if(process.env.NODE_ENV=='development'){
    16.   baseURL = 'http://192.168.3.40/xxx'
    17. }else{
    18.   baseURL = 'http://47.114.48.244/xxx'
    19. }
    20. 或者简写: 
    21. baseURL = process.env.VUE_APP_BASE_API;
    22. // baseURL es6 方法
    23. const $http = axios.create({
    24.   baseURL,
    25. })
    26. // create 是axios自带的方法
    27. export const get = (url,params)=>{
    28.   params = params || {};
    29.   return new Promise((resolve,reject)=>{
    30.       // axiso 自带 get 和 post 方法
    31.       $http.get(url,{
    32.           params,
    33.       }).then(res=>{
    34.           if(res.data.code===0){
    35.               resolve(res.data);
    36.           }else{
    37.               alert(res.data.msg)
    38.           }
    39.       }).catch(error=>{
    40.       // 这里也需要捕获异常 例如: 通过请求获取的数据res.data需要JSON.parse解析 如果解析报错错误 则只能在.catch中捕获 而在try/catch中无法捕获 或者 请求响应过程产生的报错 在 .catch 中捕获
    41.           console.log(error);
    42.       })
    43.   })
    44. }
    45. export const post = (url,params)=>{
    46.   params = params || {};
    47.   return new Promise((resolve,reject)=>{
    48.       $http.post(url,params).then(res=>{
    49.           if(res.data.code===0){
    50.               resolve(res.data);
    51.           }else{
    52.               alert(res.data.msg);
    53.           }
    54.       }).catch(error=>{
    55.           console.log(error);
    56.       })
    57.   })
    58. }

    这里用到了的知识点
    1.baseURL
    2.axios的create方法
    3.promise以及axios的get和post
    main.js方面

    1. import { get, post } from "./utils/index";
    2. Vue.prototype.$http = {
    3. get,
    4. post
    5. };

    1.这里使用了构造函数的原型prototype(vue属于构造函数)
    2.声明一个全局变量并且把封装好的get和post方法放在里面
    使用封装后的函数

    1. created() {
    2.   this.getFilmList();
    3. },
    4. methods: {
    5.   async getFilmList() {
    6.   // 完美写法: utils内封装的方法要写.catch来捕获请求相应过程中产生的异常错误 并且 还需要通过async/await的try/catch捕获try里面代码的异常错误 例如: 调用的this.$http.get方法不存在 或者 这里得到的数据res需要JSON.parse()而产生报错 都在catch中捕获
    7.       try{
    8.             const url = "/film/getList";
    9.                // 要访问第二页的话在网址后面加 ?type=2&pageNum=页数
    10.                const res = await this.$http.get(url);
    11.                this.filmList = res.films;
    12.        } catch(error) {
    13.               console.log(error);
    14.        }
    15. },

    这里注意的是，因为是promise封装的函数方法，所以使用的时候要加上
    async 函数(){ await 数据} 不然会报错，因为没有完成异步转同步
    axios